前端js部分

changeEvent (e) {   ------  //change事件方法
let oFile = e.target.files[0] ------ //获取文件对象
let param = new FormData() ------ //new一个formData
param.append('file', oFile, oFile.name) ------ //将文件添加到formdata中
param.append('chunk', '0')
let config = {
headers: {'Content-Type': 'multipart/form-data'}
}
this.axios.post('/api/upload/upavatar?username=' + username, param, config) ------//传输数据
.then(response => {
if (response.data.data === 1) { ------ //成功后的回掉
let instance = Toast({
message: '头像更改成功'
})
setTimeout(() => {
instance.close()
}, 1000)
}
}) }

  

NodeJS部分

需要引入formidable、path模块

router.post('/upavatar', function (req, res, next) {
var form = new formidable.IncomingForm()
form.uploadDir = path.normalize(__dirname + '/../public/images/avatar') ------图片上传目录
form.parse(req, function (err, fields, files) {
var oldpath = files.file.path
var newpath = path.normalize(__dirname + '/../public/images/avatar') + '\\' + req.query.username + '.png' -------//给上传的图片重命名
fs.rename(oldpath, newpath, function (err) {
if (err) {
res.send('-1')
return
}
if (newpath) {
let avatarPath = 'server/public/images/avatar/' + req.query.username + '.png' ------//存入数据库的图片地址(相对于页面)
db.updateMany('users', {'username': req.query.username}, {$set: {avatar: avatarPath}}, function (err, result) { ------//更新数据库的头像地址
if (err) {
res.send('-2')
return
}
res.json({data: 1})
})
}
})
})
})

  

NodeJS+axios上传图片的更多相关文章

  1. axios上传图片(及vue上传图片到七牛))

    浏览器上传图片到服务端,我用过两种方法: 1.本地图片转换成base64,然后通过普通的post请求发送到服务端. 操作简单,适合小图,以及如果想兼容低版本的ie没办法用此方法 2.通过form表单提 ...

  2. Vue axios 上传图片

    上传图片接口 // 上传图片 export const uploadBanner = formData => { return axios.request({ url: 'manage/slid ...

  3. axios上传图片遇见问题

    博客后台,vue-quill-editor 编辑器,上传图片,使用sm.ms图床,上传逻辑需要自定义,element-ui,el-upload,自定义http-request上传图片, 'conten ...

  4. nodejs - 1)上传图片 ,并显示 , 2)模块 formidable

    1.代码: 1-1: 入口文件: index.js var server = require('./server'); var router = require("./router" ...

  5. vue项目中使用axios上传图片等文件

    form表单提交图片会刷新页面,也可以时form绑定到一个隐藏的iframe上,可以实现无刷新提交数据. html代码: <input name="file" type=&q ...

  6. axios 上传图片

    let data = new FormData(); for (var i = 0; i < files.length; i++) { let file = files.item(i); dat ...

  7. koa2使用阿里云oss的nodejs sdk实现上传图片

    nodejs实现上传图片到阿里云,自然是写成接口形式比较方便,前端监听input file的改变,把file对象传入到formData中传入后端,不能直接传入file对象,后端需要接受formData ...

  8. [总结]vue开发常见知识点及问题资料整理(持续更新)

    package.json中的dependencies与devDependencies之间的区别 –save-dev 和 –save 的区别 我们在使用npm install 安装模块或插件的时候,有两 ...

  9. 【转】[总结]vue开发常见知识点及问题资料整理(持续更新)

    1.(webpack)vue-cli构建的项目如何设置每个页面的title 2.vue项目中使用axios上传图片等文件 3.qs.stringify() 和JSON.stringify()的区别以及 ...

随机推荐

  1. Excel单元格的日常操作

    通过右键选择插入来移动单元格 灵活的运用"整行" 与 "整列" 选中区域之后 通过点击区域边框进行移动 按住shift之后框会变成线 更容易拖动 按住ctrl拖 ...

  2. 第四阶段:2.从零打造一款工具APP产品

    1.APP:安卓跟IOS(根据目标用户选择 ,那个先做哪个后做,APP的通过需要审核,其中也有很多技巧). 同时注意设计模版的使用(提高效率).竞品分析也是少不了的.

  3. 什么?我往Redis写的数据怎么没了?

    大概是因为int没有因为change方法而改变原值,所以就说它传过去的是自身的值,因而叫值传递:User对象经过change方法后,对象的数据变了,就认为是因为实参和形参指向的是同一片内存空间,内存空 ...

  4. ABP取其精华

    目录 ABP中使用Swagger UI集成接口文档 ABP-AsyncLocal的使用 ABP-多个DbContext实现事物更新 持续更新中.

  5. Pycharm学生版安装教程(2019-12月更新)

    以下方法全部是官方渠道正版激活,可选择学生版(免费) 或企业版(付费) 我的机器学习教程「美团」算法工程师带你入门机器学习  以及 「三分钟系列」数据结构与算法  已经开始更新了,欢迎大家订阅~这篇专 ...

  6. 菜鸟系列Fabric源码学习 — committer记账节点

    Fabric 1.4 源码分析 committer记账节点 本文档主要介绍committer记账节点如何初始化的以及committer记账节点的功能及其实现. 1. 简介 记账节点负责验证交易和提交账 ...

  7. Python学习3月8号【python编程 从入门到实践】---》笔记(1)

    第十章:处理文件和异常 #学习处理文件,让程序能够快速地分析大量的数据#学习错误处理,避免程序在面对意外情形时崩溃#学习异常,是python创建的特殊对象,用于管理程序运行时出现#学习模块json,它 ...

  8. 「CodeForces 476A」Dreamoon and Stairs

    Dreamoon and Stairs 题意翻译 题面 DM小朋友想要上一个有 \(n\) 级台阶的楼梯.他每一步可以上 \(1\) 或 \(2\) 级台阶.假设他走上这个台阶一共用了 \(x\) 步 ...

  9. 《算法笔记》之基础C/C++入门

    开始进行算法笔记的学习,在此纪录下来,同时作为自己日后复习资料. 1.基本语法 #include <iostream> using namespace std; int main(){ c ...

  10. 28.python操作excel表格(xlrd/xlwt)

    python读excel——xlrd 这个过程有几个比较麻烦的问题,比如读取日期.读合并单元格内容.下面先看看基本的操作: 首先读一个excel文件,有两个sheet,测试用第二个sheet,shee ...