一、 摘要

阿里oss提供了两种上传方式到云存储一种是在Header中包含签名，一种是在URL中包含签名。区别如下

oss上传方式.png
在URL中包含签名
Header中包含签名

二、 uniapp提供的上传方式

1. uni.uploadFile(OBJECT)

重点说明，这个api是将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data。并且不可更改，是不可更改，网上很多教程修改Method方法，实际操作后，并不可行。

2. uni.request(OBJECT)

重点说明，这个api，可以自定义很多Method方法，但是data的请求的参数是
Object/String/ArrayBuffer 并且App不支持ArrayBuffer类型

上传方式讲解

• 有了以上两个重要的前提分析后，我们来说一下，在app上，如何使用uniapp进行文件上传
• 首先基于oss的上传方式，由于我这里用的是Header中包含签名的方式上传的，所以，只能使用PUT进行文件上传。
  翻阅各种资料后，发现，uniapp并没有很友好的支持PUT上传文件的方式。插件市场大部分也并不能满足需求。这里提一句OSS不支持同时在URL和Header中包含签名只能选一种。所以插件市场上的那些插件，要视情况使用。
  OSS不支持同时在URL和Header中包含签名.png
• 因为uniapp对put上传文件的支持有限，所以，最终采用内嵌webview+XMLHttpRequest的方式来进行PUT中的文件上传。
• 由于，文件选择我这里使用的是 uni.chooseImage(OBJECT)。这里有个坑，当前api返回的文件。并不能直接使用put上传到oss。补充一点，如果使用h5里面的<input type='file'/>标签回调的文件是可以上传的。由于我这里有样式的要求，所以，并没有直接使用input标签。
• 基于以上，查看相关文档后，发现使用plus.io.resolveLocalFileSystemURL可以把本地文件路径转为File对象
  resolveLocalFileSystemURL
  resolveLocalFileSystemURL.png
• 这里还有一个坑，由于XMLHttpRequest/send(body)，对body的格式有要求，所以，我们使用plus获取到的File文件依然不能直接使用。

在XHR请求中要发送的数据体. 可以是:
可以为 Document, 在这种情况下，它在发送之前被序列化.
为 XMLHttpRequestBodyInit, 从 per the Fetch spec （规范中）可以是 Blob, BufferSource (en-US), FormData, URLSearchParams, 或者 USVString 对象.
如果body没有指定值，则默认值为 null .

• 翻阅各种资料后，发现，可以把File对象重新转换成XMLHttpRequest可识别的格式

//base64编码格式转file格式
                    var aa = evt.target.result;
                    var arr = aa.split(','),
                        mime = arr[0].match(/:(.*?);/)[1],
                        bstr = atob(arr[1]),
                        n = bstr.length,
                        u8arr = new Uint8Array(n);
                    while (n--) {
                        u8arr[n] = bstr.charCodeAt(n);
                    }
                    var fileResult = new File([u8arr], "filename.jpg", {
                        type: mime
                    });

最终的fileResult就是XMLHttpRequest可识别的文件对象了

转换文件的完整代码

document.addEventListener('UniAppJSBridgeReady', () => {
    let {
        res = {},
            header,
            fileList
    } = plus.webview.currentWebview();
    var uploadPromise = []
    console.log("传递的参数" + JSON.stringify(fileList))
        //res 为oss下发的预上传的地址
        //header为oss需要添加的请求头application/octet-stream
        //fileList 本地文件路径集合。我这里为了演示，就用了第一个地址，实际项目中，可以使用批量上传
    document.addEventListener("plusready", onPlusReady(res, header, fileList[0].path), false);
});

// 扩展API加载完毕，现在可以正常调用扩展API
function onPlusReady(res, header, filePath) {
    var uploadPromise = []
    plus.io.resolveLocalFileSystemURL(filePath, function(entry) {
        res.forEach((item, i) => {
            console.log("》》》预上传" + JSON.stringify(item))
            console.log("》》》预上传文件" + JSON.stringify(entry.isFile))
            entry.file(function(file) {
                var fileReader = new plus.io.FileReader();
                console.log("getFile:" + JSON.stringify(file));
                fileReader.readAsDataURL(
                    file); //以BASE64编码格式读取文件                                    
                fileReader.onloadend = function(evt) {
                    // console.log("evt.target" + evt.target);
                    // console.log("evt.target.result len = " +evt.target.result.length);
                    // console.log("evt.target.result  = " +evt.target.result);

                    //base64编码格式转file格式
                    var aa = evt.target.result;
                    var arr = aa.split(','),
                        mime = arr[0].match(/:(.*?);/)[1],
                        bstr = atob(arr[1]),
                        n = bstr.length,
                        u8arr = new Uint8Array(n);
                    while (n--) {
                        u8arr[n] = bstr.charCodeAt(n);
                    }
                    var fileResult = new File([u8arr], "filename.jpg", {
                        type: mime
                    });
                    uploadPromise[i] = createUpload(fileResult, {
                        url: item.uploadUrl,
                        header: header
                    })

                }
            });



        })

        Promise.all(uploadPromise).then((res) => {
            console.log("全部上传成功了" + JSON.stringify(res))
            location.href =
                `callback?fileName=1233232323`;
        }).catch((res) => {

        })

    }, function(e) {
        console.log("Resolve file URL failed: " + e.message);
    });
}

项目完整源码，待补充