input oss文件上传

<button size="small" style="margin-top: 5px" @click="fileUploadClick"
      >选择视频</button
    >
    <input
      @change="handleUploadChange($event)"
      class="form-control"
      type="file"
      multiple
      id="upload_file"
      style="display: none"
    />
    <div
      v-if="percentage != 0"
      style="align-items: center; display: flex; justify-content: space-between"
    >
      <el-progress
        style="flex: 1"
        :percentage="percentage"
        :status="percentage == 100 ? 'success' : null"
      ></el-progress>
    </div>




<script>
import md5 from "js-md5";
import OSS from "../../public/oss";
export default {
  data() {
    return {
      client: "",
      percentage: 0, // 进度条百分比
      uploadStatus: null, // 进度条上传状态
    };
  },
  mounted() {
    this.client = new OSS.Wrapper({
    
      region: "", //根据那你的Bucket地点来填写
      accessKeyId: "", //自己账户的accessKeyId
      accessKeySecret: "", //自己账户的accessKeySecret
      bucket: "", //bucket名字
      secure: true, // 上传链接返回支持https
    });
  },

  methods: {
    // 上传进度函数
    progress(p) {
      var self = this;
      return function (done) {
        const percent = Math.floor(p * 100);
        self.percentage = percent;
        done();
      };
    },
    fileUploadClick() {
      document.getElementById("upload_file").click();
    },
    getCurData() {
      let myDate = new Date();
      let year = myDate.getFullYear();
      let month = myDate.getMonth() + 1;
      let day = myDate.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      return `${year}${month}${day}`;
    },
    getVideoType(str) {
      //获取最后一个.的位置
      let index = str.lastIndexOf(".");
      //获取后缀
      let ext = str.substr(index + 1);
      return ext;
    },
    handleUploadChange(e) {
      this.percentage = 0;
      let self = this;
      let input = e.target;
      let file = input.files[0];
      let getdate = this.getCurData();

      let type = this.getVideoType(file.name);
      let url = "video_sucaiku/" + getdate + "/" + md5(file.name) + "." + type;
      //获取文件后缀
      try {
        this.client
          .multipartUpload(url, file, {
            //   progress: this.progress,
            progress: this.progress,
          })
          .then(function (res) {
            self.videoUrl = url;
            console.log(res);
            console.log(res, "上传成功");
            // self.videoMerge(file.name, self.videoUrl);
          });
      } catch (e) {
        console.log(e);
      }
    },
   
  },
};
</script>