Content Table
2019-03-18

上传 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;
})