oss上传文件

最新推荐文章于 2024-05-27 17:14:33 发布

sunshine08_07

最新推荐文章于 2024-05-27 17:14:33 发布

阅读量263

点赞数

分类专栏： vue2.0

本文链接：https://blog.csdn.net/sunshine08_07/article/details/100170478

版权

vue2.0 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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，不然会报错