vue多图片上传组件

<template>
  <!-- 
    上传控件 
    用法：
     <upload-widget v-model="imgUrl"></upload-widget>
  -->
  <div class="clearfix">
    <a-upload
      :action="manageApi + '/thumbController/upload.do'"
      :data="fileUrl"
      list-type="picture-card"
      :file-list="fileInfos"
      :headers="headers"
      @preview="handlePreview"
      @change="handleChange"
      :remove="handelRemove"
      accept="image/*"
      :showUploadList="{ showPreviewIcon: this.showPreviewIcon, showRemoveIcon: this.showRemoveIcon }"（显示眼睛和隐藏判断）
    >
      <a-icon type="plus" />
      <div class="ant-upload-text">Upload</div>
    </a-upload>
    <!-- 图片预览 -->
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%; height: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>

<script>
import axios from 'axios';

/**把图片转成BASE64 */
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = (error) => reject(error);
  });
}
export default {
  name: 'UploadAlbumWidget',
  model: {
    prop: 'fileList',
    event: 'change',
  },
  props: {
    //最大上传数量
    maxUploadNum: {
      type: Number,
      default: 1,
    },
    /**文件列表 */
    fileList: {
      type: [Array, String],
      default() {
        return '';
      },
    },
    type: {
      type: String,
    },
    showPreviewIcon: {
      type: Boolean,
      default() {
        return true;
      },
    },
    showRemoveIcon: {
      type: Boolean,
      default() {
        return true;
      },
    },
  },
  data() {
    return {
      headers: {}, //头
      previewVisible: false,
      previewImage: '',
      fileInfos: [], //上传文件
    };
  },
  created() {
    // this.initVModelData();
    /**默认添加验证token */
    this.headers = {
      token: this.store.user.token,
      adminToken: this.store.admin.token,
    };
  },
  methods: {
    fileUrl() {
      return {
        type: this.type,
      };
    },
    /**处理初始v-model数据 */
    initVModelData() {
      let that = this;
      console.log('initVModelData', this.fileList);
      //判断文件上传是否多个
      if (this.fileList) {
        //多文件
        that.fileList.forEach((fl, index) => {
          that.fileInfos.push({
            uid: '-' + index,
            name: '图集',
            status: 'done',
            url: process.env.VUE_APP_IMAGE_SERVER + fl.imgPath,（process.env.VUE_APP_IMAGE_SERVER =》》》》  

）
            thumbUrl: process.env.VUE_APP_IMAGE_SERVER + fl.thumbPath,
            response: {
              data: [{ id: fl.id }],
            },
          });
        });
        // }
      }
    },
    handleCancel() {
      this.previewVisible = false;
    },
    /**预览图 */
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      console.log('handlePreview', file);
      this.previewImage = file.thumbUrl || file.preview;
      this.previewVisible = true;
    },

    handleChange({ fileList }) {
      this.fileInfos = fileList;
    },
    handelRemove(file) {
      console.log('handelRemove ');
      let result = axios({
        method: 'post',
        url: `thumbController/del.do`,
        data: {
          id: file.response.data[0].id,
        },
      });
      if (result.data.code == 200) {
        this.$message.success('删除成功');
      } else {
        this.$message.error(result.data.message);
        return false;
      }
    },
  },
  watch: {
    /**检测v-model数据是否发生改变 */
    fileList(val) {
      this.initVModelData();
    },
  },
};
</script>

<style scoped>
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>