详解Vue+axios+Node+express实现文件上传(用户头像上传)


Posted in Javascript onAugust 10, 2018

Vue 页面的代码

<label for='my_file' class="theme-color">
 <mu-icon left value="backup"></mu-icon>
 修改头像
</label>
<input type="file" ref="upload" name="avatar" id='my_file' style="display:none;" accept="image/jpg" @change="changeAvatar" />

axios接口

let ChangeAvatar = (img) => axios({
 url: '/user/changeavatar',
 method: 'post',
 anync: true,
 contentType: false,
 processData: false,
 data: img
})

js部分调用封装的接口

methods: {
  changeAvatar (event) {
   let img = event.target.files[0];
   let size = img.size;
   if (size > 3145728) {
    alert('请选择3M以内的图片!');
    return false;
   }
   let Form = new FormData();
   Form.append('avatar', img, this.avatar_name);
   API.ChangeAvatar(Form)
    .then((response) => {
     console.log(response)
    })
    .catch((error) => {
     console.log(error)
    })
  }
 }
  1. 在这里我并没有用form方式,而是将input隐藏,用label绑定input,当我们点击label的时候,也就点击了input
  2. 我将请求封装在了另一个文件里,为ChangeAvatar()函数,如果不封装,按常规写法一样是可以的
  3. Form.append('avatar', img, this.avatar_name);第一个参数为input的name,第二个参数为文件对象,第三个参数为文件的名字
  4. ajax new FormData() 方法提交文件时,不能用data:{a:1}的键值对方法提交,应当直接将文件对象提交data:FormData

后台node代码

const fileUpload = require('express-fileupload');
app.use(fileUpload());

app.post('/user/changeavatar', function(req, res) {
 console.log(req.files); // the uploaded file object
 let avatar = req.files.avatar;

 // Use the mv() method to place the file somewhere on your server
 avatar.mv('dist/static/img/avatar/'+req.files.avatar.name+'.jpg', function(err) {
  if (err)
   return res.status(500).send(err);

  res.send('File uploaded!');
 });
})

在这里我并没有用multer,而是用别人的npm包express-fileupload

代码运行,成功将图片上传到了指定目录

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个高效的JavaScript压缩工具下载集合
Mar 06 Javascript
精通Javascript系列之数值计算
Jun 07 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
js实现的捐赠管理完整实例
Jan 20 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
Mar 04 Javascript
jquery div模态窗口的简单实例
May 28 Javascript
bootstarp modal框居中显示的实现代码
Feb 18 Javascript
Vue-Router2.X多种路由实现方式总结
Feb 09 Javascript
vue计算属性computed的使用方法示例
Mar 13 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
vue.js实现双击放大预览功能
Jun 23 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
Aug 10 #Javascript
Bootstrap模态对话框中显示动态内容的方法
Aug 10 #Javascript
解决bootstrap-select 动态加载数据不显示的问题
Aug 10 #Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 #Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 #Javascript
bootstrap下拉框动态赋值方法
Aug 10 #Javascript
layui实现点击按钮给table添加一行
Aug 10 #Javascript
You might like
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
教你在PHPStorm中配置Xdebug
2015/07/27 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
js url传值中文乱码之解决之道
2009/11/20 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
BootStrap中Datetimepicker和uploadify插件应用实例小结
2016/05/26 Javascript
微信小程序图片选择区域裁剪实现方法
2017/12/02 Javascript
Angular4学习教程之DOM属性绑定详解
2018/01/04 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
Python设置默认编码为utf8的方法
2016/07/01 Python
K-近邻算法的python实现代码分享
2017/12/09 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
pandas通过索引进行排序的示例
2018/11/16 Python
python实现复制大量文件功能
2019/08/31 Python
python线程定时器Timer实现原理解析
2019/11/30 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
详解Canvas事件绑定
2018/06/27 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
西班牙语在线票务市场:SuperBoletería
2019/06/10 全球购物
阿拉伯书店:Jamalon
2019/07/24 全球购物
个人思想政治总结
2015/03/05 职场文书
企业办公室主任岗位职责
2015/04/01 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
电力安全学习心得体会
2016/01/18 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书
python tkinter Entry控件的焦点移动操作
2021/05/22 Python