vue框架-前端oss直传

• Z时代
• 2024-01-10
• 分类：综合

在vue框架" title="vue框架">vue框架中使用oss直传，前端直接调oss接口，服务端直接将所有文件存在同一个目录下（提高效率），之所以网页上看到有文件夹的区分，是因为根据前端命名方式（一般是自定义文件夹名字加文件名字加时间搓）来制造有文件夹区分的效果，这个命名可以理解成是这个文件的唯一标识。传给后端的时候直接把这个命名传入即可。

1.在阿里云新建配置跨域规则（header嫌麻烦配置成*即可，如不配置会产生跨域问题）

2.引入SDK-js

<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>

3.新建组件（我是基于vue-element组件）

3.1 如何上传

 const client = new OSS.Wrapper({
          region: _this.region,
          accessKeyId: '',//填入自己的id
          accessKeySecret: '',//填入自己的id
          bucket: _this.bucket
        })

client.multipartUpload('重命名后的名字','文件内容',{上传进度回调}）

3.2 如何浏览 （这里有个私有文件和公有文件的区别）

文档地址：https://help.aliyun.com/document_detail/64054.html?spm=a2c4g.11186623.6.771.HNKycx

私有图片拼接规则：

 var client = new OSS({ //这里是设置图片预览地址
                region: _this.region,
                accessKeyId: '',
                accessKeySecret: '',
                bucket: _this.bucket
              });
              var signUrl = client.signatureUrl(random_name, {expires: 6000, 'process' : 'image/resize,w_300'});

公有图片地址拼接规则：http://bucket.<endpoint>/object?x-oss-process=image/action,parame_value

<template>
  <div class="page">
    <div class="oss_file">
      <input type="file" :id="id"  @change="doUpload"/>
        <div>
          <p>
            上传进度：{{percentage}}
            {{percentage===1?"success!":(percentage===0?'waiting...':'uploading')}}
          </p>
        <div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'elOss',
    data () {
      return {
        region: 'oss-cn-hangzhou',
        bucket: '',//这里需要填入自己的bucket，申请完阿里云之后获得
        id: 'upload',
        baseurl:'',
        percentage: 0,
        url:'',
        urls:[]
      }
    },
    mounted() {
      this.getbaseurl();
    },
    methods:{
      getbaseurl(){ //文件夹命名
        var date=new Date;
        var year=date.getFullYear();
        var month=date.getMonth()+1;
        month =(month<10 ? "0"+month:month);
        var mydate = date.getDate();
        mydate =(mydate<10 ? "0"+mydate:mydate);
        this.baseurl = 'img/'+year+'/'+year+month+'/'+year+month+mydate+'/';
      },
      btnclick(){
        var btn = document.getElementById(this.id);
        btn.click()
      },
      doUpload () {
        const _this = this
        const urls = [];
        const client = new OSS.Wrapper({
          region: _this.region,
          accessKeyId: '',//填入自己的id
          accessKeySecret: '',//填入自己的id
          bucket: _this.bucket
        })
        _this.percentage = 0;
        const files = document.getElementById(_this.id)
        if (files.files) {
          const fileLen = document.getElementById(_this.id).files;
          var file = fileLen[0];
          if(file) {
            if (!file.type.match('image.*')) {
              this.$message.error('请上传图片格式的文件');
              return;
            }
          }
          let resultUpload = ''
          for (let i = 0; i < fileLen.length; i++) {
            const file = fileLen[i]
            // 随机命名
            let random_name = this.baseurl+this.random_string(6) + '_' + new Date().getTime() + '.' + file.name.split('.').pop()
            // 上传
            client.multipartUpload(random_name, file, {
              progress: function* (percentage, cpt) {
                // 上传进度
                _this.percentage = percentage
              }
            }).then((results) => {
              // 上传完成
              var client = new OSS({ //这里是设置图片预览地址
                region: _this.region,
                accessKeyId: '',
                accessKeySecret: '',
                bucket: _this.bucket
              });
              var signUrl = client.signatureUrl(random_name, {expires: 6000, 'process' : 'image/resize,w_300'});
             console.log(signUrl)
            }).catch((err) => {
              this.$message.error(err);
            })
          }
        }
      },
      // 随机生成文件名
      random_string(len) {
        len = len || 32;
        var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
        var maxPos = chars.length;
        var pwd = '';
        for (let i = 0; i < len; i++) {
          pwd += chars.charAt(Math.floor(Math.random() * maxPos));
        }
        return pwd;
      }
    },
    watch:{
      url(val){
        if(val){
          this.urls.push(val);
        }
      }
    }
  }
</script>

以上是 vue框架-前端oss直传 的全部内容， 来源链接： utcz.com/z/378163.html