vue項目中使用element ui上傳圖片到七牛

1.獲取token值

后台有接口調用直接返回token值

 //請求后台拿七牛雲token
    async getQiniuToken() {  //token
      let uploadtoken = await 
      this.Fetch("/osg/resource/uploadtoken/image", {
        method: "get",
      });
      console.log(uploadtoken);
        //賦值保存在本地
     this.QiniuData.token= uploadtoken.data.token   
    },   

2.貼上頁面代碼

<template>
  <div class="upload-info">
    <div>
      <el-upload
          class="upload-pic"
          :action="domain"
          :data="QiniuData"
          :on-remove="handleRemove"
          :on-error="uploadError"
          :on-success="uploadSuccess"
          :before-remove="beforeRemove"
          :before-upload="beforeAvatarUpload"
          :limit="3"
          multiple
          :on-exceed="handleExceed"
          :file-list="fileList"
        >
        <el-button size="small" type="primary">選擇圖片</el-button>
      </el-upload>
      <div>
        <img class="pic-box" :src="uploadPicUrl" v-if="uploadPicUrl">
      </div>
    </div>
    <div>
      <el-button type="primary" :loading="loading" @click="handleSubmit">提交</el-button>
      <el-button type="info" plain >取消</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      QiniuData: {
        key: "", //圖片名字處理
        token: "" ,//七牛雲token
        data:{}
      },
      domain: "http://upload.qiniup.com", // 七牛雲的上傳地址（華東區）
      qiniuaddr: "http://image.********.cn", // 七牛雲的圖片外鏈地址 七牛雲空間的外鏈地址
      uploadPicUrl: "", //提交到后台圖片地址
      fileList: []
    };
  },
  mounted() {
    this.getQiniuToken();
  },
  methods: {
    handleRemove(file, fileList) {
      this.uploadPicUrl = "";
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `當前限制選擇 3 張圖片，如需更換，請刪除上一張圖片在重新選擇！`
      );
    },
    beforeAvatarUpload(file) {   //圖片上傳之前的方法
      // const isPNG = file.type === "image/png";
      // const isJPEG = file.type === "image/jpeg";
      // const isJPG = file.type === "image/jpg";
      // const isLt2M = file.size / 1024 / 1024 < 2;

      // if (!isPNG && !isJPEG && !isJPG) {
      //   this.$message.error("上傳頭像圖片只能是 jpg、png、jpeg 格式!");
      //   return false;
      // }
      // if (!isLt2M) {
      //   this.$message.error("上傳頭像圖片大小不能超過 2MB!");
      //   return false;
      // }
      this.QiniuData.data = file;
      this.QiniuData.key = `${file.name}`;
      console.log(this.QiniuData.key)
    },
    uploadSuccess(response, file, fileList) {  //圖片上傳成功的方法
      console.log(fileList);
      console.log(response);
      console.log(file);
      this.uploadPicUrl = `${this.qiniuaddr}/${response.key}`;
    },
    uploadError(err, file, fileList) {    //圖片上傳失敗時調用
      this.$message({
        message: "上傳出錯，請重試！",
        type: "error",
        center: true
      });
    },
    beforeRemove(file, fileList) {
      // return this.$confirm(`確定移除 ${ file.name }？`);
    },
    //提交數據到后台
    handleSubmit() {
      
    },
    //請求后台拿七牛雲token
    async getQiniuToken() {  //token
      let uploadtoken = await this.Fetch("/osg/resource/uploadtoken/image", {
        method: "get",
      });
      console.log(uploadtoken);
     this.QiniuData.token= uploadtoken.data.token
    },
  }
};
</script>

3.起初也是毫無頭緒，看文檔，看博客，如有雷同，純屬借鑒！