Question

上下文

我有一个问题页面，其结构类似于以下内容

sections:[{
    section: 1,
    questions:[{
        question: 1,
        attachment: [FormData Object]
        ...
    },
    {
        question: 2,
        attachment: [FormData Object]
        ...
    }]
}, ...]

每个问题都有一个附件。我要做的是创建一个FormData对象，将文件上传到其中，并将其添加到问题对象。示例：

let formData = new FormData();
formData.append('file', event.target.files[0])
question.attachment = formData

到目前为止一切都很好。当我尝试将其发送到服务器时，问题就来了。我没有将表单对象传递给它。这是我用来发送的代码：

this.$http.post('my-path', {data: this.sections}, {headers: {'Content-Type': 'multipart/form-data'}, emulateJSON: true})

使用emulateJSON: true发送数据，但请求中不包含attachment属性。

出于某种原因使用headers: {'Content-Type': 'multipart/form-data'}发送空请求。

有没有办法做这样的事情并且确实可行？

Answer 1

我认为问题在于表单对象的序列化。

我建议您在base64中编码每个文件，然后附加它而不是表单数据对象。

或者，如果您更喜欢发布JSON中包含的表单数据。阅读有关表单数据序列化的正确方法。

根据我的经验，首选使用base64编码文件。

Answer 2

您必须将processdata设置为false

this.$http.post('my-path', {
    cache: false,
    processData: false,
    data: this.sections,
}, 
{
    headers: {
        'Content-Type': 'multipart/form-data'
    }, 
    emulateJSON: true
};)

Answer 3

如@eWizard所说。他可以使用How to convert file to base64 in JavaScript?吗？

我遇到了问题，但是我使用async和await解决了它。

然后在服务器中，他可以将其再次转换为文件。

并将功能更改为这样：

   getBase64: function(file){
        var reader = new FileReader();
        return new Promise((resolve, reject) => {
            reader.onerror = () => {
                reader.abort();
                reject(new DOMException("Problem parsing input file."));
            };
            reader.onload = () => {
                resolve(reader.result);
            };
            reader.readAsDataURL(file);
        });
    }

并按照以下说明使用

  var fileReaderPromise = await this.getBase64(image);

将json中的文件上传到服务器

3 个答案: