前端原生混合开发， 实现原生上传文件回调h5的文件链接，生成文件上传服务端

项目背景：

公司h5端项目是集成在原生应用里的，最近在做文件上传组件时， 调用了原生的相机， 上传文件功能。

在原生相册，或文件管理器中选择完文件后，会回调给h5页面一个文件链接地址的数组，具体链接地址格式就是文件在手机中的系统存储路径吧。 
h5这边在获取到地址后，需要通过get 请求，读取文件流信息， 并将文件通过 new File() 生成文件实例。 传给服务端， 具体这边实现步骤是：

第一步， 通过链接下载文件流：

    /**
     * 异步下载文件流，处理原生返回的系统路径文件流获取
     * url  对应原生系统路径下的文件地址路径
     */
    getFilesBlob(url) {
        return new Promise((resolve, reject) => {
            axios({
                method: 'get',
                url: url,
                responseType: 'blob', // 重要：设置响应类型为blob
            }).then(response => {
                resolve(response.data);
            }).catch(error => {
                reject(error);
            });
        })
    }

第二步： 将blob 生成File , 传给服务端：

// 

getFilesBlob(picJson.picPath).then(data => {

    // 创建一个Blob对象，使用响应数据
    const blob = new Blob([data], { type: 'application/pdf' });
    // 创建一个File对象，使用Blob对象和文件名
    const file = new File([blob], picJson.fileName, { type: 'application/pdf' });
    
    picJson.file =  file;  // pdfDataToFile(data, picJson.fileName);  当前注释方法弃用
    resolve(true)
}).catch(err => { 
    console.log('err: ' , err);                   
    NativeBridge.nativeShowToast("文件加载失败！");
    return reject(false);
});  

最后就可以通过 fromData, 把 file 提交给服务端了。

uploadFileServer(){
    let formData = new FormData();
    formData.append("fileContent", picJson.file);
    
   axios({
        method: 'post',
        url: uploadFileConfig[NativeBridge.nativeGetCategory().id].url,
        data: formData,
        responseType: 'json',
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    }).then((res) => {
        resolve(res.data);
    }).catch((error) => {
        reject(error);
    })
}