element多图上传回显封装

<template>

  <div>

    <el-upload

      :action="$url.programe+'thirdUpload/unauth/uploadImage'"

      list-type="picture-card"

      :file-list="updateList"

      :on-success="handleAvatarSuccess"

      :on-preview="handlePictureCardPreview"

      :on-remove="handleRemove"

    >

      <i class="el-icon-plus"></i>

    </el-upload>

    <el-dialog v-model="dialogVisible">

      <img style="width:100%;height:100%" :src="dialogImageUrl" alt />

    </el-dialog>

  </div>

</template>

<script>

export default {

  data() {

    return {

      dialogImageUrl: "",

      dialogVisible: false,

      list: [],

      updateList: []

    };

  },

  props: {

    fileList: {

      type: Array,

      default() {

        return [];

      }

    }

  },

  mounted() {

    this.updateList = [];

    this.fileList.forEach(item => {

      this.updateList.push({

        response: {

          data: item

        },

        url: this.$image + item.path

      });

    });

    this.list = this.fileList;

  },

  methods: {

    handleRemove(file, fileList) {

      var num = -1;

      this.list.forEach((item, index) => {

        if (item.path == file.response.data.path) {

          num = index;

        }

      });

      if (num !== -1) {

        this.list.splice(num, 1);

      }

      this.$emit("upload", this.list);

    },

    handlePictureCardPreview(file) {

      this.dialogImageUrl = file.url;

      this.dialogVisible = true;

    },

    handleAvatarSuccess(res, file) {

      this.list.push(res.data);

      this.$emit("upload", this.list);

    }

  }

};

</script>

        <el-form-item label="课程详情图（多张）:" prop="bannerImg">

          <hupload1

            :fileList="from.bannerImg"

            @upload="

            (e) => {

              from.bannerImg = e;

            }

          "

          ></hupload1>

        </el-form-item>