当前位置:主页 > vue.js教程 > vuejs使用FormData实现ajax上传图片文件

介绍vuejs使用FormData实现ajax上传图片文件的方法

发布:2020-01-28 17:37:14 59


为找教程的网友们整理了vue相关的编程文章,网友钟子蕙根据主题投稿了本篇教程内容,涉及到vuejs、FormData、ajax、vuejs使用FormData实现ajax上传图片文件相关内容,已被983网友关注,内容中涉及的知识点可以在下方直接下载获取。

vuejs使用FormData实现ajax上传图片文件

我相信很多使用vuejs的朋友,都有采用ajax上传图片的需求,因为前后端分离后,我们希望都能用ajax来解决数据问题,传统的表单提交会导致提交成功后页面跳转,而使用ajax能够无刷新上传图片等文件。

其实已经有朋友封装了相关的npm包,但是我想说用原生的js api来实现,也用不了多少代码,而且更灵活,能使用原生就尽量用原生。接下来就以一个简单的头像上传来说明如何使用。

效果图

vuejs使用FormData实现ajax上传图片文件

前端实现

<template>
 <div class="admin">
 <div class="admin-content">
  <div class="edit">
  <div class="avatar">
   <div class="img">
   <img :src="avatar" @click="setAvatar">
   <span>更改</span>
   </div>
   <input type="file" name="avatar" accept="image/gif,image/jpeg,image/jpg,image/png"  @change="changeImage($event)" ref="avatarInput">
  </div>
  <button type="button" @click="edit">确认修改</button>
  </div>
 </div>
 </div>
</template>
<script>
export default {
 data() {
 return {
  avatar: this.$store.state.administrator.avatar,
 }
 },
 methods: {
 edit() {
  // 修改了头像
  if (this.$refs.avatarInput.files.length !== 0) {
   var image = new FormData()
   image.append('avatar', this.$refs.avatarInput.files[0])
   this.axios.post('/avatar', image, {
   headers: {
    "Content-Type": "multipart/form-data"
   }
   })
  }
  }) 
 },
 setAvatar() {
  this.$refs.avatarInput.click()
 },
 changeImage(e) {
  var file = e.target.files[0]
  var reader = new FileReader()
  var that = this
  reader.readAsDataURL(file)
  reader.onload = function(e) {
  that.avatar = this.result
  }
 }
 }
}
</script>

解释一下上面代码的意思,当我们点击图片会触发setAvatar函数,该函数会触发input的click事件,于是就会弹出文件选择框,当我们选择了一张图片后,触发chageImage函数,这个函数的功能就是预览你上传的图片,单后当我们点击修改按钮后,就会把资源传到后端

后端处理

后端接收到你上传的资源,肯定要把资源保存到服务器,我就以Nodejs来说明,我使用formidable解析上传的数据

exports.avatar = function(req, res, next) {
 let form = new formidable.IncomingForm()
 form.parse(req, function(err, fields, files) {
 if (err) {
  return res.json({
  "code": 500,
  "message": "内部服务器错误"
  })
 }

 // 获取后缀名
 let extname = path.extname(files.avatar.name)
 let oldpath = files.avatar.path;
 let newpath = './public/avatar' + extname;
 let avatarName = 'avatar' + extname;
 // 更改名字和路径
 fs.rename(oldpath, newpath, function(err) {
  if (err) {
  return res.json({
   "code": 401,
   "message": "图片上传失败"
  })
  }
 })
 // 更新数据库
 db.updateMany('users', { "user": username }, { "avatar": avatarName },
  function(err, result) {
  if (err) {
   return res.json({
   "code": 401,
   "message": "头像更新失败"
   })
  }
  return res.json({
   "code":200,
   "message": "头像上传成功"
  })
  })
 })
}

后端解析ajax提交的数据和解析采用传统表单提交的数据方法一样,如果你是做前端开发的,不了解后端代码影响不大。
说这么多,还是来个demo吧,https://github.com/wmui/vueblog,这个小项目后台有个头像修改的功能,是使用ajax上传图片的,核心代码百行不到,前后端分离。

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


参考资料

相关文章

  • js解决ajax读取本地文件时跨域问题

    发布:2020-02-09

    本篇文章主要介绍了解决ajax不能访问本地文件问题(利用js跨域原理),具有一定的参考价值,有兴趣的可以了解一下。


  • jquery ajax跨域解决方法

    发布:2020-01-25

    本篇文章只要是对jquery ajax跨域解决方法(json方式)进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助


  • jQuery Ajax使用FormData上传文件和其他数据后端web.py获取

    发布:2020-07-06

    这篇文章主要介绍了jQuery Ajax使用FormData上传文件和其他数据后端web.py获取 ,需要的朋友可以参考下


  • 如何爬取通过ajax加载数据的网站

    如何爬取通过ajax加载数据的网站

    发布:2022-06-17

    为网友们分享了关于ajax的教程,这篇文章主要介绍了如何爬取通过ajax加载数据的网站,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下


  • Vue.js修饰符知识点详解

    发布:2019-08-02

    本篇文章主要介绍了Vue.js学习笔记之修饰符,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • ashx文件如何获取$.ajax()方法发送的数据

    发布:2020-02-11

    这篇文章主要介绍了ashx文件获取$.ajax()方法发送的数据的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下


  • 深入理解jquery Ajax 全局调用封装

    发布:2020-03-12

    这篇文章主要介绍了jquery Ajax 全局调用封装实例详解的相关资料,需要的朋友可以参考下


  • jquery的ajax提交form表单的方法总结

    发布:2021-05-27

    下面小编就为大家带来一篇jquery的ajax提交form表单的两种方法小结(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考


网友讨论