我们可以使用 javascript 来像任何其他数据文件一样上传 blob。
javascript 可以使用 xmlhttprequest 或 fetch api 上传 blob。
1。使用 xmlhttprequestxmlhttprequest (xhr) 是一种对象形式的 api,其方法在 web 浏览器和 web 服务器之间传输数据。浏览器的 javascript 环境提供该对象。通常用于异步发送和接收数据,无需重启网站。这使得享受动态、用户友好且快速的网页成为可能。
示例这是使用 xmlhttprequest 上传 blob 的示例 -
var blob = new blob([some conventional data], { type: text/plain });var xhr = new xmlhttprequest();xhr.open(post, /upload, true);xhr.onload = function (e) { if (xhr.readystate === 4 && xhr.status === 200) { console.log(xhr.responsetext); }};xhr.send(blob);
这里,我们使用一些 blob 数据向后端 api 的 /upload 端点发出 post 请求。服务器成功响应后,我们将注销响应。
2。使用获取apifetch api 允许您向服务器发出请求并从中检索数据。它内置于现代 web 浏览器中,可用于发出 get 和 post 请求。 fetch api 使用 fetch() 方法,该方法返回解析为 response 对象的 promise。然后可以使用该 response 对象访问服务器返回的数据。 fetch api 通常用作旧 xmlhttprequest api 的替代品,并且更加现代且用户友好。它也更通用,因为它可以用来向网页托管服务器以外的服务器发出请求。
这是使用 fetch 上传 blob 的示例 -
var blob = new blob([some conventional data], { type: text/plain });var formdata = new formdata();formdata.append(file, blob);fetch(/upload, { method: post, body: formdata,}).then((response) => response.text()).then((responsetext) => { console.log(responsetext);});
因此,通过这种方式,您可以使用 xmlhttprequest 或 fetch api 将 blob 数据从前端 vanilla javascript 上传到服务器,而无需使用任何第三方库。
以上就是javascript 如何上传 blob?的详细内容。
