首先下載七牛雲的JavaScript-SDK

npm install qiniu-js

下載完成JavaScript-SDK以後就可以上傳圖片資訊了

<template>
  <div>
      <input type="file" name='upFile' id="upFile" @change='changeFile($event)'>
      <input type="button" name="開始上傳" value="開始上傳" @click='uploadFile()'>
      <img v-if="coverUrl" :src="coverUrl" alt="封面">
      <el-progress :percentage="filePercent"></el-progress>
      {{filePercent}}
  
 
</div>
</template>
<script>
import * as qiniu from "qiniu-js";
 
export default {
  name:'qiniu',
  data() {
    return {
      file:null,
      videoUrl:null,
      coverUrl:null,
      filePercent:0
    };
  },
  methods: {
    changeFile(e){
    //   獲取檔案
      this.file = e.target.files[0];
    },
    uploadFile() {
    
 
// 當前VUE中的this 是指向例項，相當於父級，指向指不到子級中。所需需要一個變數 _this 儲存this得指向。
      let _this = this
    // 獲取身份的token
      let token = '6iHLwjADA4xPDG9Wl5FdJFkdU_mcaE5YrgDyoFHa:xT_22Uqm24-ZLGRFvk74Z7F-Xrw=:eyJzY29wZSI6ImppeXVuZWR1IiwiZGVhZGxpbmUiOjE2MDMzNTI0OTh9'
    // 上傳時的配置
      var config = {
        useCdnDomain: 
 
true
      };
    //  設定檔案的配置
      var putExtra = {
        fname: "",
        params: {},
        mimeType: null
      };

    //   例項化七牛雲的上傳例項
      var observable = qiniu.upload(_this.file, null, token, putExtra, config);
    //   設定例項的監聽物件
      var observer = {
        //   接收上傳進度資訊
        next(res) {
            // 上傳進度
            _this.filePercent = parseInt(res.total.percent) 
            if(_this.filePercent==100){
                console.log("success")
            } 
        },
        // 接收上傳錯誤資訊
        error(err) {
          console.log(err)
        },

        // 接收上傳完成後的資訊
        complete(res) {
             console.log(res.key)
        }
      };
      // 上傳開始
      var subscription = observable.subscribe(observer); 
    }
    
  }
};
</script>