vuejs使用FormData通过ajax上传图像文件

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

其实有些朋友已经打包了相关的npm包，但我想说的是，使用原生js api实现不需要太多代码，而且更加灵活。如果可以用native，尽量用native。接下来，上传一个简单的头像来说明如何使用它。

翻译

前端实现

模板div class=' admin ' div class=' admin-content ' div class=' edit ' div class=' avatar ' div class=' img ' img : src=' http : avatar ' @ click=' setAvat Ar ' span change/span/div输入类型=' file ' name=' avatar ' accept=' Image/gif，image/JPEG，image/jpg，Image/png ' style=' display : none ' @ change=' change Image($ event ' ref=' avatar input '/'$ store . state . administrator . avatar，}}，methods : { edit(){//修改了avatar if (this。$ refs.avatar input.files.length！==0){ var image=new FormData(). image . append(' avatar '，这。$ refs . avatarinput . files[0])this . axios . post(“/avatar”，image，{ header RS : { ' Content-Type ' : ' multipart/form-data ' } })} })})，setAvatar() { this。$refs.avatarInput.click() }，change image(e){ var file=e . target . files[0]var reader=new file reader()var that=this reader . readasdataurl(file)reader . onload=function(e){ that。头像=这个。result}}}/script解释了上述代码的含义。当我们点击图片时，会触发setAvatar功能，触发输入的点击事件，然后弹出文件选择框。当我们选择一张图片时，将触发更改图像功能。这个功能的作用是预览你上传的图片。点击修改按钮后，资源将被传输到后端。

后端处理

当后端收到您上传的资源时，它必须将资源保存到服务器。我将使用Nodejs来说明我使用强大的来分析上传的数据

exports.avatar=function(req，res，next) { let form=新的强大。IncomingForm() form.parse(req，function(err，fields，Files){ if(err){ returnres . JSON({ ' code ' : 500，' message' : '内部服务器错误' })}//获取后缀letextname=path . extname(Files . avatar . name)letoldpath=Files . avatar . path；让newpath='。/public/avatar ' ext name；让avatarName=' avatar ' extname//更改名称和路径fs.rename(旧路径，新路径，函数(err){ if(err){ returnres . JSON({ ' code ' : 401，Message': '图片上传失败' })})//update database db . updatemany(' users '，{'user' : username}，{'avatar' : avatar name}，函数(err，Result){ if(err){ returnres . JSON({ ' code ' :如果你是做前端开发的，不了解后端代码的话影响不大。说到这里，我们来做个演示，https://github.com/wmui/vueblog.这个小项目在后台有一个头像修改功能，使用ajax上传图片。核心代码少于100行，前后端分开。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。