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

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

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

效果图

前端实现

rush:js;">

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

后端处理

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

rush:js;"> 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 },result) {
if (err) {
return res.json({
"code": 401,"message": "头像更新失败"
})
}
return res.json({
"code":200,"message": "头像上传成功"
})
})
})
}

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

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

原文地址：https://www.jb51.cc/ajax/37311.html