vuejs使用FormData实现ajax上传图片文件
2017-08-08 10:55
1126 查看
我相信很多使用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上传图片的,核心代码百行不到,前后端分离。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章推荐
- 使用FormData实现ajax文件异步上传
- vuejs使用FormData对象,ajax上传图片文件
- Asp.Net Mvc 使用jQuery实现Ajax文件上传
- 使用Anthem.NET 1.5中的FileUpload控件实现Ajax方式的文件上传
- MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件02-多文件上传
- (转)使用MFC的WinINet库来实现图片文件的上传
- 使用Java、Jquery、Ajax实现的带进度条的文件上传。
- 使用ajaxfileupload.js实现ajax上传文件php版
- AjaxUpLoad.js使用实现文件上传
- 使用Anthem.NET 1.5中的FileUpload控件实现Ajax方式的文件上传
- 使用Ajax+Iframe 实现无刷新文件上传
- jqm文件上传,上传图片,jqm的表单操作,jqm的ajax的使用,jqm文件操作大全,文件操作demo
- 使用隐藏的iframe 隐藏form提交,仿AJax无刷新提交,可以实现无刷新上传文件
- 使用ajaxfileupload.js实现ajax上传文件php版
- 使用AjaxFileUpload.js实现文件异步上传
- 使用ajaxfileupload.js插件实现Ajax方式上传文件
- 使用ajaxFileUpload.js插件实现ajax无刷新上传文件
- 使用 Anthem.NET 1.5中的FileUpload控件实现Ajax方式的文件上传
- 使用隐藏的iframe 隐藏form提交,仿AJax无刷新提交,可以实现无刷新上传文件
- MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传