把网址图片传给后端同学？试试这种方法！

前景提要

在一次书写副本编辑器的时候，遇到这么一个功能，需要能从网页复制图片和文本，直接粘贴到富文本编辑器中。

但是从网络中复制的图片是一个网络地址。

首先公司服务器是加了域的，注重安全，不允许第三方资源进入，所以这张图片没有正确显示。 其次即使允许第三方图片资源进入，但是因为第三方不可靠，万一崩了，是不是就看不到了，怎么办？ 领导给了一句话，需要把这张网络图片存储起来，存到公司服务器中，于是有了以下要求： 把链接对应的图片存储到服务器中。

思路

开干

在tool.ts中书写

1、是否可下载

判断链接是否指向图片且可下载

const checkImgExists = (imgurl: string) => {
    return new Promise(function (resolve, reject) {
        var ImgObj = new Image();
        ImgObj.src = imgurl;
        ImgObj.onload = function (res) {
            resolve(res);
        };
        ImgObj.onerror = function (err) {
            reject(err);
        };
    });
};

2、将链接对应数据转化为Blob数据

将图片链接中的图片进行 XMLHttpRequest 请求，返回Blob对象

const getImageBlob = (url: string) => {
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open("get", url, true);
        xhr.responseType = "blob";
        xhr.onload = function () {
            if (this.status == 200) {
                resolve(this.response);
            }
        };
        xhr.onerror = reject;
        xhr.send();
    });
}

3、将Blob对象转为File对象

const blobToFile = (blob: Blob, fileName: string) => {
    return new window.File([blob], fileName, { type: blob.type });
};

4、暴露工具函数

export default const getFileFromLink = (downUrl: string) => {
    return new Promise((resolve, reject) => {
        checkImgExists(downUrl)
            .then(() => {
                getImageBlob(downUrl).then((res) => {
                    if (res instanceof Blob) {
                        // 这是文件名  大家随意啦
                        let fileName = 'XXX'
                        let fileObj = blobToFile(res, fileName);
                        resolve(fileObj)
                        console.log("成功转化为Bolb", fileObj);
                    } else {
                        reject("未能成功转化为Bolb")
                    }
                }).catch((err) => {
                    console.log("未能成功转化为Bolb", err);
                })
            })
            .catch((err) => {
                console.log("很抱歉, 该链接无法获取图片",err);
                reject(err)
            });
    })
}

使用

import getFileFromLink from './tool.ts'
let fileObj = getFileFromLink('https://www.baidu.com/favicon.ico')

得到了文件对象 剩下的你就可以为所欲为了！