Как загрузить файл в формате jpeg, используя jQuery ajax?

Question

Решения, которые я нашел на SO, не помогли. Я всегда получаю сообщение об ошибке «415 (неподдерживаемый тип носителя)». Но когда я использую Postman для загрузки файла на наш сервер, это работает. Что я делаю не так с этим кодом?

var form = new FormData();
form.append("", "<path-to-jpeg-file>");

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "<api url>",
  "method": "POST",
  "headers": {
    "Content-Type": "application/x-www-form-urlencoded",
    "Authorization": "Bearer dP1K7UfZSko4vT3RyVH02...",
    "cache-control": "no-cache"
  },
  "processData": false,
  "contentType": false,
  "mimeType": "multipart/form-data",
  "data": form
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

Я также читал на SO, что у меня есть избыточные объявления типов контента, поэтому я попробовал это, удалив «Content-Type»: «application / x-www-form-urlencoded», а также попытался удалить «mimeType»: "multipart / form-data" и по-прежнему получают ту же ошибку. И снова, если я использую Postman для загрузки файла, он работает (так что это не проблема сервера). Почтальон также имеет способ генерировать код для AJAX. Я скопировал и вставил сгенерированный код в свое приложение и все еще получаю ту же ошибку. Как правильно загрузить файл (в данном случае jpg) с помощью ajax?

Answer 1

Попробовав несколько разных вариантов конфигов, разные способы чтения файла и с небольшой помощью людей на этой странице, я наконец все заработал.Я надеюсь, что это сэкономит время и проблемы другим людям, которые не очень знакомы с клиентским веб-разработчиком.Я использую обещания Q здесь, но вы можете использовать любое обещание, и я уверен, что есть несколько дефектов (например, обработка ошибок), но по крайней мере у меня работает загрузка файлов!:

const readFile = (fileURI) => {
    return Q.Promise((resolve, reject) => {
        try {
            const xhr = new XMLHttpRequest();
            xhr.open('GET', fileURI);
            xhr.responseType = 'blob';
            xhr.onload = () => {
                const blob = xhr.response;
                const reader = new FileReader();
                reader.onload = () => {
                    const data = reader.result.split(',').pop();
                    resolve(data);
                };

                reader.onerror = () => {
                    reject('error reading file');
                };

                reader.readAsDataURL(blob);
            };

            xhr.onerror = () => {
                reject('unable to read image data');
            };

            xhr.send();
        } catch (e) {
            reject(e.message);
        }
    });
};

const uploadImage = (fileURI) => {
    readFile(fileURI)
    .then((data) => {
        const formData = new FormData();
        formData.append('base64', data);

        $.ajax({
            type: 'POST',
            url: '<endpoint url>',
            contentType: false,
            processData: false,
            headers: {
                'cache-control': 'no-cache'
            },
            data: formData,
            beforeSend: (xhr) => {
                xhr.setRequestHeader('Authorization', this.auth);
            },
            success: (res) => {
                logger.info(`request success: ${JSON.stringify(res)}`);
            },
            error: (error) => {
                logger.info(`request unsuccessful: ${error.statusText}`);
            }
        });
    })
    .catch((e) => {
        logger.info(`An error occurred: ${e}`);
    })
};

Мне понадобилось полтора дня, чтобы понять это!Я исправлю обещания теперь, когда у меня все работает.

Answer 2

У вас две проблемы.

---

Вы не загружаете файл

var form = new FormData();
form.append("", "<path-to-jpeg-file>");

Здесь вы:

1. Не дали данным имя, поэтому оно не будет отображаться в запросе
2. Вы пытаетесь отправить путь строки вместо фактических данных

Замените это на:

var form = new FormData( document.getElementById("yourForm") );

Убедитесь, что форма содержит <input type="file" name="something">.

---

Вы нарушаете информацию в запросе, необходимую для его декодирования

Вы устанавливаетезаголовок Content-Type, использующий три различных метода:

---

Эта попытка совершенно неверна.Вы не отправляете данные в кодировке URL.

Удалите это.

  "headers": {
    "Content-Type": "application/x-www-form-urlencoded",

---

Это довольно неправильно.Вы отправляете многопартийные данные, но у вас отсутствует обязательный параметр boundary.

Удалите это тоже.

  "mimeType": "multipart/form-data",

---

Это правильно.Вы говорите jQuery вообще не устанавливать contentType, который позволяет XMLHttpRequest экстраполировать его из объекта FormData.

Оставьте только этот.

  "contentType": false,

---

Все это предполагает, что сервер ожидает POST-запрос с составным телом.

Вы не показали нам детали запроса, который вы успешно делаете с Postman, или документацию по API.