Как отправить файл с помощью Fetch API из элемента ввода - PullRequest
Новая
       7

Как отправить файл с помощью Fetch API из элемента ввода

0 голосов
/ 13 ноября 2018

Пользователь выберет изображение, а затем я хочу отправить это изображение на сервер.

Отправка изображения обрабатывается в теле, например, я успешно проверил на почтальоне, я выбираю тело -> двоичный файл, чтобы загрузить изображение напрямую.

Я хочу повторить этот запрос, используя javascript fetch api.

Отправка 

 <input id="front" class="inputfile" type="file" onchange="frontChange(this)">

 async function frontChange(file) {
        this.frontInput = file
 }

 async function done() {

    const res = await this.submitDocument(this.frontInput.files[0]);
    console.log(res); 

 }

Функция отправки документа / файла 

async submitDocument(doc) {

        const url = <removed>;

        const body = doc;

        let headers = new Headers();
        headers.set('Authorization', this.authorization);

        const request = {
            method: 'POST',
            body: body,
            headers: headers,
        };

        try {
            const response = await fetch(url, request);
            const data = await response.json();

            return {
                response: response,
                data: data,
            };

        } catch (err) {
            throw err;
        }

    }

Не похоже, что это работает, потому что.submitDocument выдает ошибку перехвата

SyntaxError: неожиданный конец ввода JSON

1 Ответ

0 голосов
/ 13 ноября 2018

Создайте new FormData() и добавьте к нему документ, например, 

const form = new FormData(); 
form.append('file', doc);

А затем отправьте в своем теле запрос на форму, которую вы создали.

...