前端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. $Noip2014/Luogu2312$ 解方程

    $Luogu$ $Sol$ 枚举解+秦九韶公式计算+取模. $Code$ #include<iostream> #include<cstdio> #include<cst ...

  2. $ZOJ\ 2432\ Greatest\ Common\ Increasing\ Subsequence$

    传送门 $Description$ 求两个序列的最长公共上升子序列 $Solution$ $f[i][j]$表示$a$序列匹配到$i$和$b$序列匹配到$j$的最长上升序列的长度,这里并不要求$a[i ...

  3. GPL协议中国第一案尘埃落定,相关开源软件应如何风控?

    导读:2019年11月6日,数字天堂(北京)网络技术有限公司(以下简称 “数字天堂公司”)诉柚子(北京)科技有限公司.柚子(北京)移动技术有限公司(以下简称 “柚子公司”)侵犯计算机软件著作权纠纷一案 ...

  4. 如何让接口文档自动生成,SpringBoot中Swagger的使用

    目录 一.在SpringBoot项目中配置Swagger2 1.pom.xml中对Swagger2的依赖 2.编写配置类启用Swagger 3.配置实体类的文档 4.配置接口的文档 5.访问文档 二. ...

  5. 「Vijos 1283」「OIBH杯NOIP2006第二次模拟赛」佳佳的魔杖

    佳佳的魔杖 背景 配制成功了珍贵的0号药水,MM的病治好了.轻松下来的佳佳意外的得到了一个好东西--那就是--一种非常珍贵的树枝.这些树枝可以用来做优质的魔杖!当然了,不能只做自己的,至少还要考虑到M ...

  6. DNS服务器红帽5.4搭建图文教程!!!

    DNS服务器 挂载光盘 mount 查看光盘所在位置 mount -t iso9660 设备目录 /mnt 表示挂载 软件包安装 所有软件包都在Server目录下 rpm -ivh /mnt/Serv ...

  7. kmp算法初步理解

    123456789 abbdaxnds Next   01212 第三位看第二位b,第二位和第三位相同,都是b,所以第三位的next是第二位的next加1,即1+1=2 第四位看第三位b,第四位d与第 ...

  8. 2018湘潭邀请赛 AFK题解 其他待补...

    A.HDU6276:Easy h-index Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/O ...

  9. vnpy源码阅读学习(3):学习vnpy的界面的实现

    学习vnpy的界面的实现 通过简单的学习了PyQt5的一些代码以后,我们基本上可以理解PyQt的一些用法,下面让我们来先研究下vnpy的UI部分的代码. 首先回到上一节看到的run.py(/vnpy/ ...

  10. 使用zipwithindex 算子给dataframe增加自增列 row_number函数实现自增,udf函数实现自增

    DataFrame df = ...StructType schema = df.schema().add(DataTypes.createStructField("id", Da ...