## 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对象'); ```