vue aliOSS Web端签名直传

不多说了，踩坑的过程及其心累，上码就是了。
附上阿里云web直传官方文档 官方文档传送门 点我跳转
https://help.aliyun.com/document_detail/31925.html?spm=a2c4g.11186623.6.1523.50e04c07HjhF9s

1.配置阿里云（有点重要）

配置很重要，不然代码牛逼上天也访问不了阿里云

2.引入官方组件库

1.脚本引入
在index.html中引入官方js库

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

2.npm引入

npm install ali-oss

由于我折腾了多种方法，无法确定哪个有效，都用上吧，无奈了

3.在.vue中集成以下代码

带上两个重要参数：accessid 和 accesskey，既然都要前端直传oss，那这两个参数肯定知道了

<template>
    <div class="index">
        <div>
            法一的upload
            <input type="file" :id="newid" @change="on_click_upload_file"/>

        </div>
        <div class="oss_file">
            法二的upload
            <input type="file" :id="id" @change="doUpload"/>
            <hr>
            <p>
                上传进度：{{percentage}}
                {{percentage===1?'success!':(percentage===0?'waiting...':'uploading')}}
            </p>
            <hr>
            <ul>
                <li v-for="u in urls">{{u}}</li>
            </ul>
        </div>
    </div>
</template>

<script>
  export default {
    name: 'UploadImgNew',
    data () {
      return {
        region: 'oss-cn-hangzhou',
        accessid: 'L***********V',
        accesskey: 'C**********************w',
        bucket: 'q*****i-test',
        host: 'https://q******i-test.oss-cn-hangzhou.aliyuncs.com/',
        id: 'upload',
        percentage: 0,
        url: '',
        urls: [],
        newid:'newfile'
      }
    },
    methods: {
      //todo 法一：两种方法一样，细微差别，第一种方法对参数介绍详细些========================================

      /**说明：
       * suffix  ：文件后缀名
       * obj ：文件名 时间戳
       * storeAs ：上传到阿里云的文件地址
       */
       
      on_click_upload_file () {
        let _this = this
        /**
         * region：阿里云服务器地址
         * accessKeyId：您的key
         * accessKeySecret：您的密码，
         * bucket：你要上传到那个文件夹下； 这个需要在阿里云服务器建立
         */
        let client = new OSS.Wrapper({
          region: 'oss-cn-hangzhou',
          accessKeyId:'L****这里是你的accessid****V',
          accessKeySecret:'C****这里是你的accesskey****w',
          bucket: 'q******i-test',
        })
        /**===============*/
        const f = document.getElementById(_this.newid)
        console.log(f)
        if(f.files){
          const ff = f.files
          console.log(ff)
          for (let i = 0; i < ff.length; i++) {
            const singleFile = ff[i]
            //文件后缀
            const suffix = singleFile.name.split('.').pop()
            var obj = _this.timestamp()  // 这里是生成文件名

            var storeAs = `qsx-web-job/${obj}_${this.random_string(6)}.${suffix}`  //命名空间
            console.log(' => ' + storeAs)

            client.multipartUpload(storeAs, singleFile).then(function (result) {
              console.log(result) //--->返回对象
              console.log(result.url) //--->返回链接
              const url = `${_this.host}` + results.name
            }).catch(function (err) {
              console.log(err)
            })
          }
        }
      },

      /**
         * 生成文件名
         * @returns
         */
      timestamp () {
        var time = new Date()
        var y = time.getFullYear()
        var m = time.getMonth() + 1
        var d = time.getDate()
        var h = time.getHours()
        var mm = time.getMinutes()
        var s = time.getSeconds()

        console.log(y)

        return '' + y + this.add0(m) + this.add0(d) + this.add0(h) + this.add0(mm) + this.add0(s)
      },

      add0 (m) {
        return m < 10 ? '0' + m : m
      },

      //todo 法二：两种方法一样，细微差别========================================
      doUpload () {
        const _this = this
        const urls = []
        const client = new OSS.Wrapper({
          region: _this.region,
          accessKeyId: _this.accessid,
          accessKeySecret: _this.accesskey,
          bucket: _this.bucket
        })
        _this.percentage = 0
        const files = document.getElementById(_this.id)
        if (files.files) {
          const fileLen = document.getElementById(_this.id).files
          let resultUpload = ''
          for (let i = 0; i < fileLen.length; i++) {
            const file = fileLen[i]
            //文件后缀
            const suffix = file.name.split('.').pop()
            // 随机命名
            const random_name = `qsx-web-job/${this.random_string(6)}_${new Date().getTime()}.${suffix}`
            // 上传
            client.multipartUpload(random_name, file, {
              progress: function * (percentage, cpt) {
                // 上传进度
                _this.percentage = percentage
              }
            }).then((results) => {
              // 上传完成
              const url = `${_this.host}` + results.name
              console.log(results,results.url,url)
            }).catch((err) => {
              console.log(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) {
        console.log(val)
      }
    }
  }
</script>