el-upload封装

el-upload封装

uploadBtn.vue

<template>
  <div>
    <el-button type="primary" @click="importDialog = true" class="btn-search">
      导入
      <!--  -->
      <el-dialog v-el-drag-dialog
        title="导入"
        :visible.sync="importDialog"
        width="30%"
        :append-to-body="true"
        custom-class="form-dialog"
      >
        <div>
          <el-upload
            action=""
            :limit="1"
            ref="upload"
            class="upload-demo"
            :auto-upload="false"
            list-type="picture-card"
            :on-change="uploadChange"
            :http-request="handleUpload"
            :on-exceed="handleExceed"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
        </div>
        <div slot="footer" class="centerInfo">
          <!-- <el-button @click="crud.cancelCU" class="cancelbtn">取消</el-button> -->
          <el-button type="primary" @click="submitDialogImgMode1"
            >确认</el-button
          >
        </div>
      </el-dialog>
      <el-dialog v-el-drag-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </el-button>
    <span class="el-icon-circle-check" v-if="flagFile"></span>
  </div>
</template>

<script>
import crudGasAuthTemplate from "@/api/business/gasAuthTemplate";
export default {
  data() {
    return {
      // 导入模态框
      importDialog: false,
      // 是否选择上传文件
      isSelected: false,
      dialogImageUrl: "",
      dialogVisible: false,
      fileId: this.downloadFileId,
      flagFile: false
    };
  },
  props: ["downloadFileId"],
  methods: {
    uploadChange(file) {
      this.isSelected = true;
      console.log(this.isSelected);
    },
    handleRemove(file) {
      this.$refs.upload.handleRemove(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleUpload(fileObject) {
      let files = fileObject.file;
      let formData = new window.FormData();
      formData.append("file", files); //传文件
      crudGasAuthTemplate.uploadImage(formData).then((res) => {
        this.isSelected = false;
        this.flagFile = res;
        this.$emit("dataImage", res, this.fileId);
        // this.form.image1 = res;
      });
    },
    // 只允许传入一个文件
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个图片，本次选择了 ${files.length} 个图片，共选择了 ${
          files.length + fileList.length
        } 个图片`
      );
    },
    submitDialogImgMode1() {
      if (!this.isSelected) {
        this.$message.warning("请选择要上传的文件！");
        return false;
      }
      this.$refs.upload.submit();
      this.importDialog = false;
    }
  }
};
</script>
<style scoped>
.el-icon-circle-check {
  color: #67c23a;
}
</style>

Api.js

export function uploadImage(formdata) {
  return request({
    url: 'api/gasAuthTemplate/uploadImage',
    method: 'post',
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    data: formdata
  })
}

index.vue使用

                <el-form-item label="logo图标">
                  <div class="between">
                    <img :src="baseApi + form.image1" alt="" class="imgFix" />
                    <uploadBtn @dataImage="show" :downloadFileId="1" />
                  </div>
                </el-form-item>
                <el-form-item label="app图标">
                  <div class="between">
                    <img :src="baseApi + form.image2" alt="" class="imgFix" />
                    <uploadBtn @dataImage="show" :downloadFileId="2" />
                  </div>
                </el-form-item>
                <el-form-item label="背景图片">
                  <div class="between">
                    <img :src="baseApi + form.image3" alt="" class="imgFix" />
                    <uploadBtn @dataImage="show" :downloadFileId="3" />
                  </div>
                </el-form-item>
                <el-form-item label="banner图片">
                  <div class="between">
                    <img :src="baseApi + form.image4" alt="" class="imgFix" />
                    <uploadBtn @dataImage="show" :downloadFileId="4" />
                  </div>
                </el-form-item>
import uploadBtn from "@/components/UploadBtn";
export default {
  name: "defaultTemplate",
  props: ["value"],
  components: {
    uploadBtn
  },
  data() {
    return {
    
    };
  },
  computed: {
    ...mapGetters(["baseApi"])
  },
  methods: {
    show(obj, id) {
      switch (id) {
        case 1:
          this.form.image1 = obj;
          break;
        case 2:
          this.form.image2 = obj;
          break;
        case 3:
          this.form.image3 = obj;
          break;
        case 4:
          this.form.image4 = obj;
          break;
        default:
          break;
      }
    }
  }
};