上传图片至OSS

最新推荐文章于 2024-02-19 19:24:51 发布

chen_vae

最新推荐文章于 2024-02-19 19:24:51 发布

阅读量458

点赞数 1

本文链接：https://blog.csdn.net/chen_vae/article/details/85253528

版权

1.配置参数

let param = {
          region: 'XXXXXX', 
          accessKeyId: 'XXXXXX',
          accessKeySecret:'XXXXXX',
          bucket: 'XXXXXX'
        };
 let client = new OSS(param);

2.获取图片

 const files = document.getElementById(this.input)
        if (files.files) {
          const fileLen = document.getElementById(this.input).files
          if(fileLen[0].size >1024*1024*3){
            this.$Message.warning('图片应小于3M');
            document.getElementById(this.input).value= '';
            return;
          }
          if(fileLen[0].type != 'image/jpeg' && fileLen[0].type != 'image/png'){
            document.getElementById(this.input).value= '';
            this.$Message.warning('请选择格式为*.jpg、*.png的图片');
            return;
          }

3.上传

this.percentage = 0;
for (let i = 0; i < fileLen.length; i++) {
    const file = fileLen[i]
    // 随机命名
    let d = new Date();
    let random_name = d.getFullYear() +'-' + (d.getMonth() + 1) +'-' + 
      d.getDate()+'/oss_pic_' + new Date().getTime() + '.' + file.name.split('.').pop()
    // 上传
    client.multipartUpload(random_name, file, {
       progress: function* (percentage, cpt) {
          // 上传进度
          this.percentage = percentage
        }
     }).then((results) => {
    // 上传完成
    const url = 'http://XXXXXXXX/'+ results.name; 
    this.url = url; 
        // this.$store.dispatch("changeUrl", this.url); 
        }).catch((err) => { console.log(err) }) 
    }