Загрузить файл в формате json на сервер

Question

Context

У меня есть страница с вопросами, которая имеет следующую структуру:

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

как сказал @eWizard. И он может использовать Как конвертировать файл в base64 в 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);

Answer 3

вы должны установить для processdata значение false

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