前端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. WPF 窗体快捷键(热键)

    前言:在WPF项目开发当中,遇到了需要用到快捷键的需求,于是对热键做了一个快速学习,但是这方面的资源很少... 热键大致分为三种场景,下面用QQ的使用场景举例: 全局热键:QQ的Ctrl+Alt+A截 ...

  2. 洛谷$P$3066 逃跑的$BarnRunning\ Away\ From…$ $[USACO12DEC]$ 主席树

    正解:主席树 解题报告: 传送门! 1551做$dp$实在是做不下去了,,,于是来水点儿别的题$QAQ$ 然后这题,挺纸老虎的我$jio$得,,,看起来很难的样子然后仔细想下之后发现依然是个板子呢,, ...

  3. 浅析Java hashCode()方法

      散列码(hash code)是由对象导出的一个整数值. 散列码没有规律,两个不同的对象x和y,x.hashCode()与y.hashCode()基本上不会相同. public static voi ...

  4. 「洛谷P1196」「NOI2002」银河英雄传说 解题报告

    P1196 [NOI2002]银河英雄传说 题目描述 公元五八○一年,地球居民迁至金牛座α第二行星,在那里发表银河联邦创立宣言,同年改元为宇宙历元年,并开始向银河系深处拓展. 宇宙历七九九年,银河系的 ...

  5. 信息熵为什么要定义成-Σp*log(p)?

    信息熵为什么要定义成-Σp*log(p)? 再解释信息熵之前,需要先来说说什么是信息量. 信息量是对信息的度量,单位一般用bit. 信息论之父克劳德·艾尔伍德·香农(Claude Elwood Sha ...

  6. Java工作流引擎系统节点接收人设置“其他方式总结”系列讲解

    关键字: 驰骋工作流程快速开发平台 工作流程管理系统 工作流引擎 asp.net工作流引擎 java工作流引擎. 开发者表单  拖拽式表单 工作流系统CCBPM节点访问规则接收人规则 适配数据库: o ...

  7. js获取url地址栏参数的方法,解决中文乱码问题,能支持中文参数

    第一种:参数只能是英文的 function getQuery(name) { var reg = new RegExp("(^|&)" + name + "=([ ...

  8. 【 Tomcat 】tomcat8.0 基本参数调优配置-----(1)

    Tomcat 的缺省配置是不能稳定长期运行的,也就是不适合生产环境,它会死机,让你不断重新启动,甚至在午夜时分唤醒你.对于操作系统优化来说,是尽可能的增大可使用的内存容量.提高CPU 的频率,保证文件 ...

  9. 如何配置好Selenium2Library的环境

    1.首先是下载如下文件 1,ActivePython-其自带了pip工具,很方便,记得选择activepython是2.7x版本的python: 2.依次安装wxpython,Robotframewo ...

  10. 如何优雅的用策略模式,取代臃肿的 if-else 嵌套,看这篇就够了

    经常听同事抱怨,订单来源又加了一种,代码又要加一层if-else判断,光判断订单来源的if-else就好几百行代码,代码我都不想看了,相信很多同行都有过这样的感受! Java的二十几种设计模式背的滚瓜 ...