Блог

Главная - Вопросы по программированию - Как я могу загрузить файл, а также включить данные JSON с помощью API выборки?

Как я могу загрузить файл, а также включить данные JSON с помощью API выборки?

#javascript #jquery #node.js #express #fetch-api

Вопрос:

Надеюсь, у тебя сегодня хороший день. Поэтому я использую Fetch API для загрузки файлов на сервер, но я также хочу включить строку в качестве JSON для своего бэкенда. Но я не могу этого сделать.

Прямо сейчас вот как выглядит моя функция загрузки файлов. Это отлично работает, если я хочу просто загрузить файл и не включать строку в качестве JSON:

 const uploadFile = ( e ) => {

    const uploadedFile = e.target.files[ 0 ];
    const formData     = new FormData();

    formData.append( 'data', uploadedFile );

    const rawResponse = await fetch( '/upload-file', {
          method: 'POST',
          body: formData
    });
    
};

uploadFile();

Получение файла в моем бэкэнде NodeJS с помощью req.files.data ;

Но если я включу строку в качестве JSON и попытаюсь загрузить файл, то в моем бэкэнде NodeJS я не буду определен. Вот как это выглядит со строкой в виде JSON:

 const uploadFile = ( e ) => {

    const uploadedFile = e.target.files[ 0 ];
    const formData     = new FormData();
    const str          = 'from client';

    formData.append( 'data', uploadedFile );

    const rawResponse = await fetch( '/upload-file', {
          method: 'POST',
          body: {
                file: formData,
                str 
          }
    });
    
};

uploadFile();

Теперь, если я хочу получить файл в своем бэкэнде с:

req.files.file , Я понимаю undefined .

req.body , Я понимаю { 'object Object': '' } .

req.files.data , Я понимаю UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'data' of undefined .

req.body.data , Я понимаю undefined .

Что здесь происходит не так?

Комментарии:

1. вы добавляете его в formdata, а не в тело

2. formData.append( 'str', '["some JSON here"]' );

3. классные вы, ребята. это сработало. какой из ваших ответов я должен выбрать?

Ответ №1:

вы добавляете его FormData , а не тело

 const uploadFile = ( e ) => {

    const uploadedFile = e.target.files[ 0 ];
    const formData     = new FormData();
    const str          = 'from client';

    formData.append( 'data', uploadedFile );
    formData.append( 'str', str );

    const rawResponse = await fetch( '/upload-file', {
          method: 'POST',
          body: formData
    });
    
};

uploadFile();

Ответ №2:

Просто добавьте значение в объект FormData, как вы уже сделали с файлом

 formData.append( 'str', '["some JSON here"]' );

А затем продолжайте отправлять только этот объект, body: formData

Метки: ,