前端 vue上传七牛云 （需后端返回token）

<template>
  <div class="upload-info">
    <el-upload
      style="margin: 20px auto"
      :action="domain"
      :data="QiniuData"
      :on-remove="handleRemove"
      :on-error="uploadError"
      :on-success="uploadSuccess"
      :before-upload="beforeAvatarUpload"
      :on-preview="handlePictureCardPreview"
      :file-list="fileList"
      list-type="picture-card"
      :limit="limit"
    >
      <i class="el-icon-plus"></i>
    
        <!-- <el-button size="small" type="primary">点击上传</el-button> -->
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
  
    </el-upload>
    <el-dialog :visible.sync="dialogVisible" style="margin: 5vh auto">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
<script>
import * as api from "@/api/supervise";
export default {
  props: ["limit", "fileEcho", "isPreview", "disabled"],
  data() {
    return {
      fileList: [],
      loading: false,
      QiniuData: {
        key: "", //图片名字处理
        token: "", //七牛云token
        data: {},
      },
      domain: "http://up-z1.qiniup.com", // 七牛云的上传地址（华东区）
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  watch: {
    fileEcho(nv) {
      if (nv) {
        this.fileList = this.fileEcho;
        console.log(this.fileList, "111111");
      }
    },
  },
  mounted() {
    this.getQiniuToken();
  },
  methods: {
    handlePictureCardPreview(file) {
      this.dialogVisible = true;
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
      this.$emit("getResponse", this.fileList);
    },
    beforeAvatarUpload(file) {
      //图片上传之前的方法
      this.QiniuData.data = file;
      this.QiniuData.key = `${file.name}`;
    },
    uploadSuccess(response, file, fileList) {
      //图片上传成功的方法
      var url = "http://patrol.sonser.cc/" + response.key;
      this.fileList.push({
        name: file.name,
        size: file.size,
        url: url,
      });

      this.$emit("getResponse", this.fileList);
    },
    uploadError(err, file, fileList) {
      //图片上传失败时调用
      this.$message({
        message: "上传出错，请重试！",
        type: "error",
        center: true,
      });
    },
    //请求后台拿七牛云token
    async getQiniuToken() {
      //token
      let uploadtoken = await api.getQiniuToken({});
      this.QiniuData.token = uploadtoken.data;
    },
  },
};
</script>