Content Table

上传 Blob URL 指向的文件

Blob 是 Binary large object 的简称,格式为 blob:http://localhost:8080/da126298-1b6b-4dfb-8a92-2e3ccbee611d, 是一种伪协议,只能在浏览器本地使用,例如在使用 TinyMCE 粘贴从 Word 复制的图片时,得到一个 Blob URL,可以使用下面的方式把 Blob 对应的图片上传到服务器:

  1. 使用 XMLHttpRequest 获取 Blob URL 源数据的 Blob 文件对象
  2. 上传 Blob 到服务器

下面以上传图片 Blob 为例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
const xhr = new XMLHttpRequest();
xhr.open('GET', blobUrl); // blob:http://localhost:8080/da126298-1b6b-4dfb-8a92-2e3ccbee611d
xhr.responseType = 'blob';

xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
const imageBlob = this.response;
const imageType = imageBlob.type;
let imageName = null;

// 根据文件的类型确定文件名,否则服务端得到的文件名为 blob,没有后缀
if (imageType.includes('png')) {
imageName = 'uploaded-image.png';
} else if (imageType.includes('gif')) {
imageName = 'uploaded-image.gif';
} else if (imageType.includes('bmp')) {
imageName = 'uploaded-image.bmp';
} else {
imageName = 'uploaded-image.jpg';
}

// 上传 Blob 图片
const form = new FormData();
form.append('file', imageBlob, imageName); // 第三个参数为文件名

$.ajax({
type: 'POST',
url : Urls.FORM_UPLOAD_TEMPORARY_FILE,
data: form,
processData: false,
contentType: false,
}).done(function(result) {
// 把服务器返回的图片 URL 插入到需要的地方
console.log(result);
});
}
};

xhr.send();

获取 Blob 对象的核心代码为:

1
2
3
4
5
6
7
8
9
var xhr = new XMLHttpRequest();
xhr.open('GET', 'blob:http://your.blob.url.here', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
var blob = this.response; // blob is now the blob that the object URL pointed to.
}
};
xhr.send();

使用 Axios 的为:

1
2
3
4
5
6
7
axios({
method: 'get',
url: blobUrl,
responseType: 'blob',
}).then(function(response) {
let blob = response.data;
})