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

 更新时间:2018年08月10日 10:15:45   作者:ZONE_98F  
这篇文章主要介绍了详解Vue+axios+Node+express实现文件上传(用户头像上传),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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

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

相关文章

  • 解决ant-design-vue中menu菜单无法默认展开的问题

    解决ant-design-vue中menu菜单无法默认展开的问题

    这篇文章主要介绍了解决ant-design-vue中menu菜单无法默认展开的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue+element-ui表格封装tag标签使用插槽

    vue+element-ui表格封装tag标签使用插槽

    这篇文章主要介绍了vue+element-ui表格封装tag标签使用插槽,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • vue组件是如何解析及渲染的?

    vue组件是如何解析及渲染的?

    这篇文章主要介绍了vue组件是如何解析及渲染的?,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2021-01-01
  • 基于Vue3实现视频播放与截图功能

    基于Vue3实现视频播放与截图功能

    这篇文章主要为大家详细介绍了如何通过Vue3实现简单的视频播放与截图功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2025-04-04
  • 如何换个角度使用VUE过滤器详解

    如何换个角度使用VUE过滤器详解

    这篇文章主要给大家介绍了如何换个角度使用VUE过滤器的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用VUE具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-09-09
  • Vue3 计算属性的用法详解

    Vue3 计算属性的用法详解

    学过 vue2 的宝子们应该都清楚,计算属性这个东西在项目开发过程中使用的还是比较频繁的,使用频率相对来说比较高。本文就来为大家介绍一下Vue3中计算属性的用法,需要的可以参考一下
    2022-07-07
  • Vue实现动态显示表单项填写进度功能

    Vue实现动态显示表单项填写进度功能

    这篇文章主要介绍了Vue实现动态显示表单项填写进度功能,此功能可以帮助用户了解表单填写的进度和当前状态,提高用户体验,通常实现的方式是在表单中添加进度条,根据用户填写状态动态更新进度条,感兴趣的同学可以参考下文
    2023-05-05
  • 基于Vue + ElementUI实现可编辑表格及校验

    基于Vue + ElementUI实现可编辑表格及校验

    这篇文章主要给大家介绍了基于Vue + ElementUI 实现可编辑表格及校验,文中有详细的代码讲解和实现思路,讲解的非常详细,有需要的朋友可以参考下
    2023-08-08
  • Vue 中 reactive创建对象类型响应式数据的方法

    Vue 中 reactive创建对象类型响应式数据的方法

    在 Vue 的开发世界里,响应式数据是构建交互性良好应用的基础,之前我们了解了ref用于定义基本类型的数据,今天就来深入探讨一下如何使用reactive定义对象类型的响应式数据,感兴趣的朋友一起看看吧
    2025-02-02
  • 详解Vue-Router源码分析路由实现原理

    详解Vue-Router源码分析路由实现原理

    这篇文章主要介绍了Vue-Router源码分析路由实现原理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05

最新评论