您没有加载文件

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生成代码的方法。我将生成的代码复制并粘贴到我的应用程序中，仍然出现相同的错误。使用ajax上传文件（在本例中为jpg）的正确方法是什么？

Answer 1

您有两个问题。

您没有加载文件

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

您在这里：

没有给数据命名，所以它不会出现在请求中
您正在尝试发送字符串路径而不是实际数据

替换为：

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文档。

Answer 2

在尝试了几种不同的配置变体，不同的读取文件方式以及在此页面上的一些人的帮助下，我终于使一切正常。我希望这可以节省对客户端Web开发不太熟悉的其他人一些时间和麻烦。我在这里使用Q Promise，但是您可以使用任何Promise，并且我肯定有一些缺陷（例如错误处理），但是至少我可以进行文件上传！

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}`);
    })
};

我花了一天半的时间解决了这个问题！我已经做好了一切，现在我会兑现承诺。

如何使用jQuery ajax上传jpeg文件？

2 个答案:

您没有加载文件

您在解码所需的请求中破坏了信息