NodeJS+axios上传图片
前端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上传图片的更多相关文章
- axios上传图片(及vue上传图片到七牛))
浏览器上传图片到服务端,我用过两种方法: 1.本地图片转换成base64,然后通过普通的post请求发送到服务端. 操作简单,适合小图,以及如果想兼容低版本的ie没办法用此方法 2.通过form表单提 ...
- Vue axios 上传图片
上传图片接口 // 上传图片 export const uploadBanner = formData => { return axios.request({ url: 'manage/slid ...
- axios上传图片遇见问题
博客后台,vue-quill-editor 编辑器,上传图片,使用sm.ms图床,上传逻辑需要自定义,element-ui,el-upload,自定义http-request上传图片, 'conten ...
- nodejs - 1)上传图片 ,并显示 , 2)模块 formidable
1.代码: 1-1: 入口文件: index.js var server = require('./server'); var router = require("./router" ...
- vue项目中使用axios上传图片等文件
form表单提交图片会刷新页面,也可以时form绑定到一个隐藏的iframe上,可以实现无刷新提交数据. html代码: <input name="file" type=&q ...
- axios 上传图片
let data = new FormData(); for (var i = 0; i < files.length; i++) { let file = files.item(i); dat ...
- koa2使用阿里云oss的nodejs sdk实现上传图片
nodejs实现上传图片到阿里云,自然是写成接口形式比较方便,前端监听input file的改变,把file对象传入到formData中传入后端,不能直接传入file对象,后端需要接受formData ...
- [总结]vue开发常见知识点及问题资料整理(持续更新)
package.json中的dependencies与devDependencies之间的区别 –save-dev 和 –save 的区别 我们在使用npm install 安装模块或插件的时候,有两 ...
- 【转】[总结]vue开发常见知识点及问题资料整理(持续更新)
1.(webpack)vue-cli构建的项目如何设置每个页面的title 2.vue项目中使用axios上传图片等文件 3.qs.stringify() 和JSON.stringify()的区别以及 ...
随机推荐
- [梁山好汉说IT] 梁山好汉和秒杀系统
[梁山好汉说IT] 梁山好汉和秒杀系统 0x00 摘要 今天看了一篇好文章,里面一些思路颇值得借鉴.先摘录总结精华.然后看看梁山好汉如何处理秒杀系统(系统隔离/系统搭建/风控过滤/削峰/信号广播... ...
- 记一次线上 OOM 和性能优化
大家好,我是鸭血粉丝(大家会亲切的喊我 「阿粉」),是一位喜欢吃鸭血粉丝的程序员,回想起之前线上出现 OOM 的场景,毕竟当时是第一次遇到这么 紧脏 的大事,要好好记录下来. 1 事情回顾 在某次周五 ...
- tomcat 配置项目前缀(推荐方式四)
一. 显示配置 Context 的 path 需要在 server.xml 文件中手动配置. <Host name="localhost" appBase="w ...
- Windows远程桌面管理--功能强大的远程批量管理工具【转】
曾经,我想着要是有一款绿色小巧,功能实用的远程桌面管理工具,其界面简洁,操作便捷,能够同时远程操作多台服务器,并且多台服务器间可以自由切换,适用于网站管理人员使用的工具该有多好,苍天不负有心人,终于出 ...
- java之斗地主
hashmap集合+ArrayList集合+Collections集合工具类shuffle()和sort()hashmap中get(key).put(key/value)Arraylist中的add( ...
- 使用Theia——创建插件
上一篇:使用Theia——创建扩展包 创建Theia插件 下面我们来看看如何创建Theia插件.作为示例,我们将注册一个Hello World命令,该命令显示一个“Hello World”通知.本文将 ...
- 组件与props简解
一.创建组件 1.函数式创建 特点: 组件不能访问this对象 组件无法访问生命周期的方法 无状态组件只能访问输入的props,无副作用 function Title() { return <h ...
- git submodule 管理子项目
使用场景 拆分项目,当项目越来越大之后,我们希望 子模块 可以单独管理,并由 专门 的人去维护,这个时候只可以使用 git submodule 去完成. 常用命令 git clone <repo ...
- [转]Linux制作启动盘
假设你想备份一个叫做 /home/joeuser/ 的目录,但是不想包括子目录 /home/joeuser/junk/,因为其中包括的都是不必要的文件.你想创建一个叫做 backup.iso 的映像, ...
- 案例分析丨H&M用设计冲刺将App研发周期缩短为6个月
案例背景 H&M是一家来自瑞典的时装公司,1947年成立.截至2018年6月,H&M 分店遍布全球 68 个国家和地区,分店数目为 4338 间. 作为快速服装生产商,H&M的 ...