vuejs使⽤FormData对象，ajax上传图⽚⽂件
我相信很多使⽤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" @change="changeImage($event)" ref="avatarInput">        </div>
<button type="button" @click="edit">确认修改</button>
</div>
</div>
</div>
</template>
<script>
import AdminAside from '../../components/admin/AdminAside.vue'
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
that.avatar = sult
}
}
}
}
</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 = ame(files.avatar.name)
let oldpath = files.avatar.path;
let newpath = './public/avatar' + extname;
let avatarName = 'avatar' + extname;
// 更改名字和路径
if (err) {
return res.json({
"code": 401,
"message": "图⽚上传失败"
})
}
})
// 更新数据库
vuejson转对象
db.updateMany('users', { "user": username }, { "avatar": avatarName },      function(err, result) {
if (err) {
return res.json({
"code": 401,
"message": "头像更新失败"
})
}
return res.json({
"code":200,
"message": "头像上传成功"
})
})
})
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。