关于阿里云OSS的文章可以看OSS来存储文件 和 自己搭建文件服务器_tengyuxin的博客-优快云博客_oss本地搭建
前端上传的逻辑思路:
1. 根据html5+的 封装的API ,根据图片本地路径,将图片转成base64数据
2. 通过uniapp的API。将 base64数据转成 ArrayBuffer 二进制数据,就可以上传了
1. 具体代码如下
解释一下参数:
(1)imgFile是图片本地路径
(2)uploadUrl 是OSS临时上传的STS凭证
(3)type 是上传图片的类型,如 png ,jpg ,JPEG 等
//1. 直接将二进制流图片直传到OSS
const directOss = (imgFile,uploadUrl,type)=>{
let fileReader = new plus.io.FileReader();
fileReader.readAsDataURL(imgFile);
fileReader.onloadend = function(evt) {
//得到base64的字符串
let base64Str = evt.target.result;
//去掉base64的前缀data:image/jpeg;base64,
let tempStr = base64Str.replace(/^data:image\/\w+;base64,/, '');
//获取二进制流
let fileBinary = uni.base64ToArrayBuffer(tempStr);
uni.request({
url: uploadUrl,
data: fileBinary,
method: 'PUT',
header: {
"Content-Type": type,
},
success: (res) => {
// console.log(res);
},
});
}
};