详解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 &amp; DHTML 实例编程(教程)DOM基础和基本API
Jun 02 Javascript
Google的跟踪代码 动态加载js代码方法应用
Nov 12 Javascript
javascript检测页面是否缩放的小例子
May 16 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
Dec 08 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
详解Vue取消eslint语法限制
Aug 04 Javascript
BootStrap modal实现拖拽功能
Dec 01 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
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
php入门教程 精简版
2009/12/13 PHP
PHP Directory 函数的详解
2013/03/07 PHP
php实现监听事件
2013/11/06 PHP
ThinkPHP自动填充实现无限级分类的方法
2014/08/22 PHP
php实现简单文件下载的方法
2015/01/30 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
PHP编写文件多服务器同步程序
2016/07/02 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
jquery三个关闭弹出层的小示例
2013/11/05 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
Javascript技术栈中的四种依赖注入详解
2016/02/23 Javascript
JavaScript  event对象整理及详细介绍
2016/10/10 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
2017/06/01 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
vue favicon设置以及动态修改favicon的方法
2018/12/21 Javascript
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
python网络编程学习笔记(三):socket网络服务器
2014/06/09 Python
python实现给字典添加条目的方法
2014/09/25 Python
Python基于Socket实现的简单聊天程序示例
2017/08/05 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
浅谈numpy数组的几种排序方式
2017/12/15 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
python nmap实现端口扫描器教程
2020/05/28 Python
你所在的项目是如何确定版本号的
2015/12/28 面试题
高中自我鉴定
2013/12/20 职场文书
致跳高运动员加油稿
2014/02/12 职场文书
干部考核评语
2014/04/29 职场文书
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书