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

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

本篇文章主要介绍了vuejs使用FormData实现ajax上传图片文件，具有一定的参考价值，有兴趣的可以了解一下

我相信很多使用vuejs的朋友，都有采用ajax上传图片的需求，因为前后端分离后，我们希望都能用ajax来解决数据问题，传统的表

单提交会导致提交成功后页面跳转，而使用ajax能够无刷新上传图片等文件。

其实已经有朋友封装了相关的npm包，但是我想说用原生的js api来实现，也用不了多少代码，而且更灵活，能使用原生就尽量用原

生。接下来就以一个简单的头像上传来说明如何使用。

效果图

前端实现前端实现

<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>

},

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"

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

}

到后端

后端处理后端处理

后端接收到你上传的资源，肯定要把资源保存到服务器，我就以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({