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

来源：动视网责编：小采时间：2020-11-27 22:33:19

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

vuejs使用FormData实现ajax上传图片文件:我相信很多使用vuejs的朋友，都有采用ajax上传图片的需求，因为前后端分离后，我们希望都能用ajax来解决数据问题，传统的表单提交会导致提交成功后页面跳转，而使用ajax能够无刷新上传图片等文件。其实已经有朋友封装了相关的npm包，但是我想说用原生的js

推荐度：

点击下载本文 文档为doc格式

导读vuejs使用FormData实现ajax上传图片文件:我相信很多使用vuejs的朋友，都有采用ajax上传图片的需求，因为前后端分离后，我们希望都能用ajax来解决数据问题，传统的表单提交会导致提交成功后页面跳转，而使用ajax能够无刷新上传图片等文件。其实已经有朋友封装了相关的npm包，但是我想说用原生的js

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

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

效果图

前端实现

<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" style="display:none" @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上传图片的，核心代码百行不到，前后端分离。

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

推荐度：

点击下载本文 文档为doc格式

标签：使用 VUE 上传图片

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐