Ajax 文件上传 Vue.js

Question

我正在尝试使用 Vue.js 通过 Ajax 上传文件 - 但是，服务器一直响应说文件需要是图像（它在不使用 ajax 时有效）。我的设置如下：

<input type="file" name="avatar" v-model="profileFormData.avatar">

我的数据是：

profileFormData: {
            "name": '',
            "email": '',
            "avatar": '',
        },

对于文件上传，我需要做一些具体的事情吗？

Answer 1

我似乎找到了解决这个问题的方法。首先，我必须从表单元素（以及该表单中的每个元素）中删除 v-model。然后，不要发布 v-model，而是使用 FormData 获取要发送的数据。

这是一个例子：

//Pass the form into a new FormData object
var formData = new FormData(this.el);

//Pass through the object instead of data passed via a v-model
    this.vm
        .$http[this.getRequestType()](this.el.action, formData)
        .then(this.onComplete.bind(this))
        .catch(this.onError.bind(this));