根据文件url路径生成文件流和文件

试用场景，编辑是后端返回文件路径展示且需要以文件形式传回后端

实现方法，首先根据fetch或axios等请求方法传成文件流，然后再使用new File()转换成文件

1、

getFileFromUrl(url, sign)//url文件路径
                .then((response) => {
                   
                        setFile(response)
                   
                })
                .catch((e) => {
                    setFileList([])
                    setFile()
                });

2、 getFileFromUrl

// 把图片url转成文件流
    function getFileFromUrl(url, sign) {
        return new Promise(function (resolve, reject) {
            getBlob(url, sign)
                .then((blob) => {
                    let type = ''
                    let fileType = fileName?.split('.').slice(-1)[0]
                    if (fileType == 'png') type = 'image/png'
                    else if (fileType == 'pdf') type = 'application/pdf'
                    let file = new File([blob], fileName, { type })
                    // 返回结果
                    resolve(file)
                })
                .catch((e) => {
                    reject(e)
                })
        })
    }

3、getBlob

function getBlob(url, sign) {
        const api = env.URL_PATH;
        return fetch(api + url, {
            method: 'get',
        })
            .then(function (response) {
                if (response.headers.get('content-disposition').split('filename=')[1]?.includes('pdf') || response.headers.get('content-disposition').split('filename=')[1]?.includes('png')) {
                    fileName = response.headers.get('content-disposition').split('filename=')[1]
                   
                } 
                return response.blob()
            })
    }

*1因为有的文件路劲后面并没有带png、pdf等文件类型标志，所以需要在请求头里面的content-disposition获取文件名称截取文件类型

*2因为一般后端返回的路劲会有跨域的问题，所以需要进行代理，比如代码我配置了env.URL_PATH，env文件里面设置URL_PATH，在proxy里面配置文件代理路径

*若无跨域情况可以直接使用如下

function getFileFromUrl(url, fileName) {
    return new Promise((resolve, reject) => {
      let blob = null
      let xhr = new XMLHttpRequest()
      xhr.open('GET', url)
      xhr.responseType = 'blob'
      xhr.onload = () => {
        blob = xhr.response
        let file = new File([blob], fileName, { type: blob.type })
        resolve(file)
      }
      xhr.onerror = (e) => {
        reject(e)
      }
      xhr.send()
    })