uni-app 直传阿里OSS （H5）

H5版本 H5版本 H5版本

一、安装依赖

npm i ali-oss --save

二、在需要上传的页面或者JS文件中引入

const OSS = require('ali-oss');

三、通过uni-app的API选择照片

此处获取的是图片的临时地址，在H5上为 blob地址

uni.chooseImage({
    count: 6, //默认9
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album'], //从相册选择
    success: function (res) {
        console.log(JSON.stringify(res.tempFilePaths));
        // 获取到的应该是  blob地址
    }
});

四、获取 OSS STS 签名

此处为后台签名接口返回。 获取 临时 密钥。

返回示例

五、(重点!)将选择的blob地址实例化为一个文件对象 就行input选择出的文件对象一样

传入 blob地址，返回promise, 打点then() 即可获取 blob对象

function h5_url_to_blob(url){
    return new Promise((resolve,reject)=>{
        var xhr = new XMLHttpRequest();
        xhr.open( 'GET', url, true);
        xhr.responseType = 'blob';
        xhr.onload = function( e) {
            if(this.status == 200) {
                var Blob = this.response;
                // console.log(myBlob)
                resolve(Blob)
                // myBlob现在是对象URL指向的blob。 
            }
        };
        xhr.send();
    })
}

六、实例化OSS，并上传。

let client = new OSS({
    accessKeyId: sign.AccessKeyId, // 后台的临时签名ID
    accessKeySecret: sign.AccessKeySecret, // 后台的临时签名密钥
    stsToken: sign.SecurityToken,
    endpoint: 'xxxxbeijing.aliyuncs.com/', // 上传后的域名
    bucket: 'xxx', // OSS仓库名
});
let curTime = new Date();
let year = curTime.getFullYear(),
    month = curTime.getMonth() + 1,
    day = curTime.getDate()
生成日期文件夹 自定义，可根据自身业务 区分文件夹。每个 ‘ / ’ 即是一级目录
let dir = 'imgs/' + year + '/' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day) + '/'
let result = await client.put(dir +'文件名', '通过第五步转换的blob对象');