一、 摘要
阿里oss提供了两种上传方式到云存储一种是在Header中包含签名，一种是在URL中包含签名。区别如下
oss上传方式.png
在URL中包含签名
Header中包含签名
二、 uniapp提供的上传方式
重点说明，这个api是将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data。并且不可更改，是不可更改，网上很多教程修改Method方法，实际操作后，并不可行。
重点说明，这个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);
});
}
项目完整源码，待补充
