使用 javascript 通过 file=@ 格式上传文件

Question

我有一个 api 电话要求我通过 file=@ 格式上传文件。我使用 postman/curl 让它按预期工作例如

curl -X POST \
    'http://localhost/test' \
    -H 'Authorization: Bearer ...' \
    -H 'Content-Type: application/x-www-form-urlencoded' \
    -H 'content-type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW' \
    -F 'file=@C:\Users\aaa\Downloads\testdata.xlsx'

当我尝试通过网络进行操作时，我从 API 得到了 400 的回报。我已经尝试了一些不同的东西，这里是我当前的例子。

<form id="test-form">
    <input id="file-import" type="file" name="file">
    <div id="test">upload file</div>
</form>


<script>

jQuery(document).on('click', '#test', function (e) {
    var data = new FormData();
    data.append("file", jQuery('#file-import')[0].value);

    var xhr = new XMLHttpRequest();

    xhr.open("POST", "http://localhost/test");
    xhr.setRequestHeader("Authorization", "Bearer " + sessionStorage.t);
    xhr.setRequestHeader("Content-Type", "multipart/form-data;         boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW");

    xhr.send(data);
});
</script>

如果我右键单击 devtools 并复制为 curl 命令，我会得到以下内容。

curl "http://localhost/test" 
-H "Authorization: Bearer ..." 
-H "Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW" 
--data-binary ^"------WebKitFormBoundaryW0inUk99iHMiw7fd^

Content-Disposition: form-data; name=^\^"file^\^"^

^

C:^\^\fakepath^\^\testdata.xlsx^

------WebKitFormBoundaryW0inUk99iHMiw7fd--^

^" --compressed

我如何在此处更新我的前端代码以获取 file=@ 格式而不是数据....或者是否有其他方法来解决这个问题？

如果需要更多信息来帮助解决此问题，请告诉我。

Answer 1

这个问题是因为 content-type header 被发送了，但是这应该被忽略，浏览器将自动使用默认的 content-type 这使我能够上传通过网络提交文件。

使用 javascript 通过 file=@ 格式上传文件

Upload file via file=@ format using javascript

javascript

ajax

multipartform-data

xmlhttprequest