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()的区别以及 ...
随机推荐
- TestStand 基本设置
1. 过程模型设置 菜单->Configure->Station Options->Model TestStand 默认提供了三种过程模型 Sequential.Batch.Para ...
- dockerfile部署tomcat+jdk
FROM centos: MAINTAINER www.ctnrs.com ENV VERSION= RUN yum install wget curl unzip iproute net-tools ...
- 【题解】SDOI2010所驼门王的宝藏(强连通分量+优化建图)
[题解]SDOI2010所驼门王的宝藏(强连通分量+优化建图) 最开始我想写线段树优化建图的说,数据结构学傻了233 虽然矩阵很大,但是没什么用,真正有用的是那些关键点 考虑关键点的类型: 横走型 竖 ...
- $NIM$游戏小总结
$umm$可能之后会写个博弈论总结然后就直接把这个复制粘贴上去就把这个删了 但因为还没学完所以先随便写个$NIM$游戏总结趴$QAQ$ 首先最基础的$NIM$游戏:有$n$堆石子,每次可以从一堆中取若 ...
- StatePattern(状态模式)-----Java/.Net
在状态模式(State Pattern)中,类的行为是基于它的状态改变的.这种类型的设计模式属于行为型模式. 在状态模式中,我们创建表示各种状态的对象和一个行为随着状态对象改变而改变的 context ...
- mysql5.7 数据库自动备份脚本
新建备份目录 mkdir /backups mkdir /backups/mysql 新建存放备份脚本目录 mkdir /data/scripts 备份脚本: mysql_backup.sh ==== ...
- 「Luogu P1210」回文检测 解题报告
题面 这是一道诡异的黄题 居然让你求一串吧啦吧啦的东西中 字母(大小写)最长的回文串的长度,还要输出完整的串 吐血 思路: 保持淡定,我们啥都不会,就会Manacher,那就用Manacher大法! ...
- vue项目使用v-charts的柱形图的各种样式和数据配置
找了很多网上关于v-charts的柱形图使用,我发现我一模一样的配置就是没有效果,我原来是按需引入的, import VeHistogram from 'v-charts/lib/histogram' ...
- 命令别名设定:alias,unalias 历史命令:history
1.别名设定举例 alias lm=‘ls -al | more’ 还可以取代现有指令 alias rm='rm -i' 查询现有别名 alias 取消别名 unalias lm 2.历史命令:his ...
- 【转】分布式服务框架 Zookeeper -- 管理分布式环境中的数据
Zookeeper 分布式服务框架是 Apache Hadoop 的一个子项目,它主要是用来解决分布式应用中经常遇到的一些数据管理问题,如:统一命名服务.状态同步服务.集群管理.分布式应用配置项的管理 ...