uniapp中OSS直传阿里云(h5)

OSS直传阿里云

在移动端uniapp项目中遇到了要是用OSS直传阿里云服务器,经过各种踩坑,最终想总结点东西,希望有用

1、安装依赖

npm i ali-oss --save

2、在上传页面中引入

const OSS = require(‘ali-oss’);

3、实例化OSS

实例化oss时要么用后台返回的数据,要么自己在自己所用的阿里云服务器寻找,此处能查的比较多,不多说了

let client = new OSS({
 	region: 'xxxxbeijing.aliyuncs.com/', // 上传后的域名
    accessKeyId: sign.AccessKeyId, // 后台的临时签名ID
    accessKeySecret: sign.AccessKeySecret, // 后台的临时签名密钥
    stsToken: sign.SecurityToken,
    bucket: 'xxx', // OSS仓库名
});

4、通过uniapp的api选择图片

uni.chooseImage({
    count: 3, //默认9
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
    sourceType: ['album'], //从相册选择
    success: function (res) {
        console.log(res);//此处res中有所需要的信息	res.tempFiles[0];
        let curTime = new Date();
		let year = curTime.getFullYear();
   		let month = curTime.getMonth() + 1;
        let day = curTime.getDate();
		let dir = 'imgs/' + year + '/' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day) + '/';
		//接下来是重点   此处client是第三步中实例化的
		client.multipartUpload(dir+'文件名称', res.tempFiles[0]).then(ress=>{
               console.log(ress);//此处就已经上传成功了
              })
    }
});

总结

笔者在这方面遇到了很多坑,使用阿里云文档以下写法时会报错Must provide String/Buffer/ReadableStream for put,然后查过要处理blob,但是转过之后上传文件的类型又遇到问题,不是图片格式,所以直接改用multipartUpload的方式上传,最后上传成功,如果有什么问题可以交流交流,有更好的方法也可以交流一下

  try {
    const result = await client.put('exampledir/exampleobject.txt', data);
    console.log(result);
  } catch (e) {
    console.log(e);
  }
}
putObject();

猜你喜欢

转载自blog.csdn.net/moanuan/article/details/120706169