详解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 相关文章推荐
Jquery+ajax请求data显示在GridView上(asp.net)
Aug 27 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
jquery遍历数组与筛选数组的方法
Nov 05 Javascript
AngularJS中的表单简单入门
Jul 28 Javascript
Node.js批量给图片加水印的方法
Nov 15 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
生成无限制的微信小程序码的示例代码
Sep 20 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 Javascript
JSONP解决JS跨域问题的实现
May 25 Javascript
vue路由权限校验功能的实现代码
Jun 07 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 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
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
php str_replace的替换漏洞
2008/03/15 PHP
PHP安全性漫谈
2012/06/28 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
php封装的验证码工具类完整实例
2016/10/19 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
2012/08/14 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
Angular.js基础学习之初始化
2017/03/10 Javascript
AngularJS中下拉框的高级用法示例
2017/10/11 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
详解Python中的正则表达式的用法
2015/04/09 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
Python循环结构的应用场景详解
2019/07/11 Python
Python selenium如何打包静态网页并下载
2020/08/12 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
荷兰和比利时时尚鞋店:Van Dalen
2018/04/23 全球购物
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
送给程序员的20个Java集合面试问题
2014/08/06 面试题
实习指导老师评语
2014/04/26 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
介绍信格式样本
2015/05/05 职场文书
刑事上诉状范文
2015/05/22 职场文书
海上钢琴师的观后感
2015/06/11 职场文书
Pandas自定义选项option设置
2021/07/25 Python