文件上传图片形式

<template>
  <div>
    <el-upload
      style="margin-top: 10px;"
      class="upload-demo"
      list-type="picture-card"
      action="http://192.168.1.115:9999/sdfs/file/uploadFile"
      :on-remove="handleRemoveF"
      :on-success="handleSuccessF"
      :before-upload="handleBefore"
      :file-list="fileList">
      附件上传
      <div slot="tip" class="el-upload__tip">文件大小不超过{{size}}MB</div>
      <div slot="file" slot-scope="{file}">
        <div style="width: 146px;height: 146px;display: flex;justify-content: center;align-items: center;
                  padding: 3px;">
          <span>{{ file.name }}</span>
        </div>

        <span class="el-upload-list__item-actions">
                      <span class="el-upload-list__item-preview" @click="handleDown(file)">
                          <i class="el-icon-download"></i>
                      </span>
                      <span class="el-upload-list__item-delete" @click="handleRemoveF(file)">
                          <i class="el-icon-delete"></i>
                      </span>
                  </span>
      </div>
    </el-upload>
  </div>
</template>

<script>
import util from '@/libs/util'
export default {
  name: "UploadFile",
  props: {
    fileList:{
      type: Array,
      default: () => {
        return []
      }
    },
    size:{
      type: Number,
      default: () => {
        return 1
      }
    }
  },
  watch:{

  },
  data() {
    return {
      uploadUrl: util.baseUrl + '/sdfs/file/uploadFile',
      file:''
    }
  },
  methods: {
    handleRemoveF(file, fileList) {
      for(let i in this.fileList){
        if(file.data.filePath==this.fileList[i].data.filePath){
          this.fileList.splice(i,1)
        }
      }
    },
    handleDown(file) {
      window.open(util.baseUrl + '/sdfs/file/download?filePath=' + file.data.filePath)
    },
    handleBefore(file){
      const isLt2M = file.size / 1024 / 1024 < this.size;
      if (!isLt2M) {
        this.$Message.error('上传文件大小不能超过'+ this.size +'MB!')
      }
      return isLt2M;
    },
    handleSuccessF(res, file) {
      res.name = file.name
      this.fileList.push(res)
    }
  }
}
</script>

<style scoped>

</style>