ant-vue图片上传组件渲染图片列表的处理

素颜马尾好姑娘i 2021-09-24 11:12 559阅读 0赞

<template>
      <div class="clearfix">
        <a-upload
          :action="actionUrl"
          list-type="picture-card"
          :file-list="fileList"
          @preview="handlePreview"
          @change="handleChange"
          :before-upload="beforeUpload"
          :remove="handRemove"
          :multiple="true"
        >
          <div v-if="fileList.length < 8">
            <a-icon type="plus" />
            <div class="ant-upload-text">Upload</div>
          </div>
        </a-upload>
        <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
          <img alt="example" style="width: 100%" :src="previewImage" />
        </a-modal>
      </div>
    </template>
    <script>
    import axios from 'axios'
    
    export default {
      data() {
        return {
          previewVisible: false,
          previewImage: '',
          fileList: [],
          actionUrl: '',
          delFIleName: '', //删除的文件路径
          isAllowUpload: false //是否允许上传
        }
      },
      props: {
        model: {
          type: String,
          default: ''
        },
        isOpen: {
          type: Boolean,
          default: false
        },
        imageArr: {
          type: Array,
          default: () => []
        }
      },
    
      watch: {
        isOpen() {},
        fileList() {
          console.log('fileList :>> ', this.fileList)
        },
        imageArr() {
          console.log('this.imageArr :>> ', this.imageArr)
          if (this.imageArr.length > 0 && this.fileList.length <= 0) {
            this.imageArr.map((item, index) => {
              let a = {
                uid: item,
                name: 'xxx.png',
                status: 'done',
                url: item
              }
              this.fileList.push(a)
            })
          }
        }
      },
      created() {},
    
      mounted() {
        this.actionUrl = this.$host + '/api/UploadFile'
      },
    
      methods: {
        // 上传前对文件大小和格式做检测
        beforeUpload(file) {
          return new Promise((resolve, reject) => {
            var testmsg = /^image\/(jpeg|png|jpg)$/.test(file.type)
            const isLt5M = file.size / 1024 / 1024 <= 5 //图片大小不超过5MB
            if (!testmsg) {
              this.$message.error(
                'Only JPG, JPEG, GIF and PNG images can be uploaded!'
              )
              return reject(false)
            }
            if (!isLt5M) {
              this.$message.error(
                'The size of the uploaded picture should not exceed 5M!'
              )
              return reject(false)
            }
            return resolve(true)
          })
        },
        handleCancel() {
          this.previewVisible = false
        },
        async handlePreview(file) {
          if (!file.url && !file.preview) {
            file.preview = await this.getBase64(file.originFileObj)
          }
          this.previewImage = file.url || file.preview
          this.previewVisible = true
        },
        handleChange(info) {
          const that = this
          this.fileList = info.fileList
          info.model = this.model
          this.$emit('uploadFileList', info) //实时返回现有文件list
          console.log('info :>> ', info)
          // 删除
        },
        getBase64(file) {
          return new Promise((resolve, reject) => {
            const reader = new FileReader()
            reader.readAsDataURL(file)
            reader.onload = () => resolve(reader.result)
            reader.onerror = error => reject(error)
          })
        },
        uploadImg() {
          const data = {}
        },
        handRemove(file) {
          console.log('删除', file)
          if (file.response) {
            this.deleteFile(file.response.data.fileName)
          } else if (file.url) {
            this.deleteFile(file.url)
          }
        },
        // 删除文件
        deleteFile(fileName) {
          const a = {
            method: 'DelFile',
            userId: window.userId || 1,
            sign: '19B39A0351B99062CCFDDE168E32D279',
            currentPage: 0,
            limit: 0,
            datas: {
              fullFileName: fileName
            }
          }
          const url = this.$host + '/api/DelFile'
          axios.post(url, JSON.stringify(a)).then(res => {
            if (res.code === 0) {
              console.log('删除成功')
            } else {
              console.log('删除失败')
            }
          })
        },
        //返回一个 promise：检测通过则返回resolve；失败则返回reject，并阻止图片上传  [检测文件大小]
        checkImageWH(file) {
          const self = this
          return new Promise(function(resolve, reject) {
            const filereader = new FileReader()
            filereader.onload = e => {
              const src = e.target.result
              const image = new Image()
              image.onload = function() {
                // 获取图片的宽高，并存放到file对象中
                console.log('file width :' + this.width)
                console.log('file height :' + this.height)
                file.width = this.width
                file.height = this.height
                resolve()
              }
              image.onerror = reject
              image.src = src
            }
            filereader.readAsDataURL(file)
          })
        }
      }
    }
    </script>
    <style lang="less" scoped>
    /* you can make up upload button and sample style by using stylesheets */
    .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>