封裝Element UI的上傳元件 主要用于上傳圖檔

<template>
  <div class="UploadLogo">
    <el-upload
      ref="UploadImage"
      name="Image"
      action="#"
      accept=".jpg, .png"
      list-type="picture-card"
      multiple
      :limit="100"
      :on-preview="ImagePreview"
      :on-remove="ImageRemove"
      :http-request="ImagePush"
      :auto-upload="false"
    >
      <div class="span"><i class="el-icon-plus"></i>{{ TipsText }}</div>
    </el-upload>
    <el-dialog :visible.sync="ImageVisible">
      <img width="100%" :src="ImageFile" alt="" />
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["TipsText"],
  data() {
    return {
      ImageFile: "",
      ImageVisible: false,
      ImageFileList: [],
      // 傳回路徑
      // Url: [],
    };
  },
  methods: {
    // Image删除
    ImageRemove(file, fileList) {
      console.log(file, fileList);
    },
    // Image檢視
    ImagePreview(file) {
      this.ImageFile = file.url;
      this.ImageVisible = true;
    },
    // Image檔案存儲為數組
    ImagePush(file) {
      this.ImageFileList.push(file.file);
    },
    // Image送出
    /**
     * distinguish接收父元件傳遞過來的參數用于判斷是哪一個方法送出過來的
     * 把distinguish和傳回值一起封裝然後傳遞給父元件
     */
    ImageUpload(distinguish) {
      if (this.ImageFileList.length == 0) return;
      let formData = new FormData();
      for (let i = 0; i < this.ImageFileList.length; i++) {
        formData.append("file", this.ImageFileList[i]);
      }
      this.$api.File.UploadFile(formData)
        .then((res) => {
          var list = res.fileOssUri.split(",");
          let data = { distinguish, list };
          this.$emit("UploadImageUrl", data);
        })
        .catch((res) => {
          this.$message({
            message: res.message,
            type: "error",
          });
        });
    },
  },
};
</script>

<style lang="less" scoped>
.UploadLogo {
  margin-top: 10px;

  .span {
    position: relative;
    bottom: -40px;
    display: flex;
    flex-direction: column;
    line-height: 40px;
    height: 20px;
    color: #888;
    font-size: 13px;
  }
}
</style>
           

具體調用方法

html

js

<script>
import UploadImage from "../../tool/Upload/UploadImage.vue";

export default {
  components: {
    UploadImage,
  },
  // 點選釋出按鈕
    SubmitSpectacleFrameClick() {
      this.$refs.ProductInfo.$refs.UploadImage.submit();
      this.$refs.ProductInfo.ImageUpload("infoFileList");
    },
  // 接收子元件傳遞的傳回值
    UploadImageUrl(res) {
      switch (res.distinguish) {
        case "infoFileList":
          this.SpectacleFrameArray.infoFileList = res.list;
          break;
      }
    },
};
</script>
           

css

<style lang="less" scoped>
.UploadLogo {
  margin-top: 10px;

  .span {
    position: relative;
    bottom: -40px;
    display: flex;
    flex-direction: column;
    line-height: 40px;
    height: 20px;
    color: #888;
    font-size: 13px;
  }
}
</style>
           

不需要TipsText這個屬性的話可以删掉然後隻保留一個icon圖如果删掉這個的話css也可以全部删除了,以上.

效果圖