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

时间:2019-02-12 02:36:39

标签: javascript ajax xmlhttprequest multipartform-data

我有一个api调用,要求我通过file = @格式上传文件。 我有使用邮递员/卷曲的预期工作 例如

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 = @格式而不是数据形式获取....还是有另一种方法可以解决此问题?

让我知道是否需要更多信息来帮助解决此问题。

1 个答案:

答案 0 :(得分:0)

此问题是由于发送了内容类型标头引起的,但是应将其保留,浏览器将自动使用默认的内容类型,使我能够通过网络上传文件。