在 BlobBuilder 中更改文件名以作为 XHR 上的 FormData 传递

Changing filename in BlobBuilder to be passed as FormData on XHR(在 BlobBuilder 中更改文件名以作为 XHR 上的 FormData 传递)
本文介绍了在 BlobBuilder 中更改文件名以作为 XHR 上的 FormData 传递的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我目前正在尝试将 ArrayBuffer 上传到服务器(我无法更改),该服务器期望我上传的文件采用 multipart/form-data 格式.服务器从 Content-Disposition 部分中提取将被保存的 filename 并在 Content-type 下提取服务时将使用的 MIME 类型文件.目前,我已成功上传文件:

I'm currently trying to upload an ArrayBuffer to a server (which i can't change) that expects the file i'm uploading on a multipart/form-data format. The server extracts from the Content-Disposition part the filename that will be saved and under Content-type the MIME type which will be used when serving the file. Currently, i'm succesful on uploading the file with:

var xhr = new XMLHttpRequest();
var fdata = new FormData();
var bb;

if (WebKitBlobBuilder) {
    bb = new WebKitBlobBuilder();
} else if (MozBlobBuilder) {
    bb = new MozBlobBuilder();
} else if (BlobBuilder) {
    bb = new BlobBuilder();
}

bb.append(obj.array);

fdata.append('file', bb.getBlob("application/octet-stream"));

xhr.open("POST", url, true);
xhr.send(fdata);

但标头是按照浏览器的喜好发送的,例如在 Chrome 上:

But the headers are sent as the browser likes, on Chrome for example:

Content-Disposition: form-data; name="file"; filename="blob"
Content-Type: application/octet-stream;

我曾考虑使用 FileWriter API 将其保存到临时文件中,然后上传,但这是不对的.

I've contemplated saving it to a temporary file with FileWriter API and then upload it, but that just isn't right.

回答时要考虑:

  • 服务器无法修改,我也不愿意选择其他服务器提供商.
  • 它必须至少在 Firefox 和 Chrome 上运行(我的应用已经仅限于这两种浏览器).

推荐答案

刚刚自己解决了,感谢 Chromium 问题指出 w3c 标准草案的答案 XMLHttpRequest.基本上我应该改变:

Just solved it myself, thanks to a Chromium issue pointing me to the answer on w3c standard draft XMLHttpRequest. Basically i should change:

fdata.append('file', bb.getBlob("application/octet-stream"));

到:

fdata.append('file', bb.getBlob("application/octet-stream"), obj.filename);

它给出了想要的结果.

这篇关于在 BlobBuilder 中更改文件名以作为 XHR 上的 FormData 传递的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)