oss上傳文件

 html代碼

<el-input
                    type="paperTitle"
                    placeholder="填寫真實標題,不超過50字"
                    v-model="paperTitle"
                    maxlength="50"
                    show-word-limit
                  >
</el-input>

<el-progress
                  v-show="fileFlag == true"
                  :text-inside="true"
                  :color="customColors"
                  :percentage="percent"
                  style="margin-top: 20px"
                >
</el-progress>

js代碼

data:{
    fileFlag: false, //是否顯示進度條
    percent: 0, //上傳文件百分比
}
/* 上傳之前 */
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 30;
      if (!isLt2M) {
        this.$message({
          message: "上傳文件大小不能超過 30MB!",
          type: "warning"
        });
      }  
    },
    /* 上傳成功 */
    handleSuccess(res, file) {

     if(res){
       this.percent=100;
       this.fileFlag = true;
     }
      this.successUpLoad = false; 
    },

 OSSinit(file) {
      console.log(file)
      this.file=file.file
      var client = new OSS.Wrapper({
        region: "oss-cn-beijing",
        accessKeyId: "LTAI4FoiwSU57x6WxLBToiZr",
        accessKeySecret: "hJ5GlRzHu0sQ1NHMyLzUrSgnrIIumB",
        bucket: "cnkijc"
      });
      var flieInfo = this.file.name.split(".");
      var storeAs = "upload/" + timestamp() +"."+ flieInfo[1];
      var that = this
      client
        .multipartUpload(storeAs, this.file, {
          progress: async function(p) {
            //p進度條的值
            console.log(p);
            that.fileFlag = true;
            that.percent = Math.floor(p * 100);
          }
        })
        .then(function(result) {
          if(result.res.status==200){
            console.log('http://cnkijc.oss-cn-beijing.aliyuncs.com/'+result.name)
            alert('上傳成功')
          }

        })
        .catch(function(err) {
          console.log(err);
        });


      function 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();
        var ms = time.getMilliseconds();
        console.log(y);
        return (
          "" + y + add0(m) + add0(d) + add0(h) + add0(mm) + add0(s) + add0(ms)
        );
      }
    

注:progress函數一定要加上async,不然會報錯

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章