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

Question

I have an api call that requires me to upload a file via file=@ format. I have it working as expected using postman/curl eg

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'

When I try and do it via the web I am getting a 400 back from the API. I have tried a few different things here is my current example.

<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>

If I right click in devtools and copy as curl command I get the below.

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

How can I update my frontend code here to get it in the file=@ format instead of data .... or is there another way to approach this?

Let me know if any more information is required to help solve this.

Answer 1

造成此问题的原因是，正在发送内容类型标头，但是应将其省略，浏览器将自动使用默认的内容类型，使我能够通过Web上传文件。