详解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 类似flash效果的立体图片浏览器
Feb 08 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
Jun 20 Javascript
js点击出现悬浮窗效果不使用JQuery插件
Jan 20 Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
使用jQuery监听DOM元素大小变化
Feb 24 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
Vue中组件之间数据的传递的示例代码
Sep 08 Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 Javascript
jQuery中$原理实例分析
Aug 13 jQuery
快速解决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
E路文章系统PHP
2006/12/11 PHP
php通用防注入程序 推荐
2011/02/26 PHP
php获取系统变量方法小结
2015/05/29 PHP
php操作MongoDB类实例
2015/06/17 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
jquery操作select option 的代码小结
2011/06/21 Javascript
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
如何使用python记录室友的抖音在线时间
2020/06/29 Python
用Python进行websocket接口测试
2020/10/16 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
2014/04/10 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
2014/04/29 HTML / CSS
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
网络、C以及其他硬件方面的面试题
2016/08/23 面试题
高中生自我评价个人范文
2013/11/09 职场文书
旅游管理专业个人求职信范文
2013/12/24 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
小学班主任个人总结
2015/03/03 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书
Python time库的时间时钟处理
2021/05/02 Python
OpenCV全景图像拼接的实现示例
2021/06/05 Python
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python
详解Python类和对象内容
2021/06/22 Python
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android
Python尝试实现蒙特卡罗模拟期权定价
2022/04/21 Python