element+vue文件分片上传七牛云

最新推荐文章于 2026-05-23 15:49:41 发布

原创最新推荐文章于 2026-05-23 15:49:41 发布 · 1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

该博客演示了如何使用Element UI组件库和Vue.js，结合七牛云提供的SDK，实现文件的分片上传功能。通过一个实际的DEMO，详细解释了上传过程和关键代码。

element+vue实现文件上传七牛云

根据七牛云sdk示例做的一个demo
七牛云文件上传sdk文档

<template>
  <div>
    <el-upload
      class="upload-demo"
      drag
      :limit="1"
      :before-upload="handleBeforeUploadVideo"
      :http-request="requestFile"
      :on-remove="removeFile"
      action=""
      >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
    <!-- 进度条 -->
    <el-progress  v-if="progressFlag" :percentage="loadProgress"></el-progress>
    <el-button id="myBtn" v-if="progressFlag" size="mini">{{buttonText}}</el-button>
  </div>
</template>

<script>
  import * as qiniu from 'qiniu-js'
  export default {
    data() {
      return {
        loadProgress: 0, // 动态显示进度条
        progressFlag: false, // 关闭进度条
        buttonText: "暂停上传"
      };
    },
    methods: {
      //移除文件
      removeFile() {
        this.progressFlag = false;
        this.buttonText = "暂停上传";
      },
      //上传之前
      handleBeforeUploadVideo(file) {
        //上传之前重新获取uptoken以免过期
        // console.log(file)
        this.progressFlag = true;
      },
      //
      uploadWithSDK(token,putExtra,config,domain,file) {
        let that = this;
        console.log("token,",token);
        console.log("putExtra,",putExtra);
        console.log("config,",config);
        console.log("domain,",domain);
        console.log("domain,",file);
        if (file) {
          let key = file.name;
          // putExtra.customVars["x:name"] = key.split(".")[0];
          // 设置next,error,complete对应的操作，分别处理相应的进度信息，错误信息，以及完成后的操作
          let error = function(err) {
            console.log(err);
          };

          let complete = function(res) {
            console.log(res);
          };

          let next = function(response) {
            console.log(response);
            that.loadProgress = response.total.percent;
          };

          let subObject = {
            next: next,
            error: error,
            complete: complete
          };
          // 调用sdk上传接口获得相应的observable，控制上传和暂停
          let observable = qiniu.upload(file, key, token, putExtra, config);
          let subscription = observable.subscribe(subObject);

          //监听按钮事件，控制上传
          that.$nextTick(function () {
            document.getElementById("myBtn").addEventListener("click", function(){
              console.log("1111111111111111111111111111111111111111")
              if(that.buttonText == "暂停上传"){
                that.buttonText = "继续上传";
                subscription.unsubscribe();
              }else if(that.buttonText = "继续上传"){
                that.buttonText = "暂停上传";
                subscription = observable.subscribe(subObject);
              }
            });
          })

        }

      },
      requestFile(param) {
        console.log("request,",param)
        let file = param.file;
        //uptoken
        let token = "";
        //外链域名
        let domain = "";
        //可以配置分片大小等配置，具体查看官方文档
        let config = {
          useCdnDomain: true,//是否使用CDN加速域名
          disableStatisticsReport: false,//是否禁用日志报告
          retryCount: 6//上传自动重试次数
        };
        let putExtra = {
          customVars: {}
        };
        this.uploadWithSDK(token,putExtra,config,domain,file)
      }
    },
    created () {
      
    }
  }
</script>