antdesignvue 多文件或单文件上传pdf和图片，加预览下载删除，限制文件大小

 <a-upload
            :customRequest="customRequest"
            :multiple="true"
            :beforeUpload="beforeFileUpload"
            name="file"
            :file-list="uploadedFileList"
            @preview="previewFile"
            :fileList="fileList"
            :remove="imgDel"
            v-decorator="['fileIds', {rules: [{required: true, message: '请上传附件！'}]}]"
          >
            <a-button><a-icon type="upload"/>上传附件</a-button>
          </a-upload>

// 上传文件
      customRequest(file) {
        //初始化文件信息
        const fileInfo = {
          uid: file.file.uid,
          name: file.file.name,
          status: 'uploading',
          response: '',
          url: ''
        }
        //放入上传列表中，以便于显示上传进度
        this.uploadedFileList.push(fileInfo)
        const formData = new FormData()
        formData.append('file', file.file)

//调用上传文件接口
        fileInfoUpload(formData).then((res) => {
          file.onSuccess(res.data, file)
          this.uploading = false
          if (res.success) {
            fileInfo.status = 'done'
            fileInfo.id = fileInfo.uid = res.data
            fileInfo.url = 'api/fileInfo/preview?id=' + res.data
            fileInfo.name = file.file.name
            this.fileList.push(fileInfo)
            this.$message.success('上传成功')
            this.setFileList()
          } else {
            fileInfo.status = 'error'
            fileInfo.response = res.msg
            this.$message.info('上传失败：' + res.message)
          }
        })
      },

        setFileList() {
        this.fileIdStrList = ''
        if (this.fileList.length > 0) {
          this.fileList.map((val, index) => {
            if (index != 0) {
              this.fileIdStrList += ','
            }
            this.fileIdStrList += val.id
          })
        }

//把fileId存到form表单中
        this.form.setFieldsValue({fileIds: this.fileIdStrList})
      },

//上传之前的操作

        beforeFileUpload(file, fileList) {
        var this_ = this
        // this.loading = true
        return new Promise((resolve, reject) => {
          const isSize= file.size  > 1*1024*1024

        //if(this.fileList.length ==1){//可以限制只上传一个文件
          //  this_.$message.error('只能上传一个文件')
            //reject(false)
          //}

const isfileType = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'application/pdf'          

         if (!isfileType ) {
            this.$message.error('请上传.jpg .png .pdf 格式的文件 ')
            reject(file)
          }
          if (isSize) {
            this_.$message.error('上传文件不能超过1M!')
            reject(false)
          }else{
            resolve(true)
          }          
        }).finally(() => {
          // this.loading = false
        })
      },

        // 预览下载
      previewFile(item) {
        if (item.name.endsWith('.jpg') || item.name.endsWith('.png')) {
          const imgWindow = window.open('')
          imgWindow && imgWindow.document.write(`<image src='${item.url}' style='display: flex; margin: 0 auto'/>`)
        } else {
          if (item.url) {

//调用下载接口
            fileInfoDownload({id: item.id}).then((res) => {
              downLoadFile(res)
            }).catch(() => {
              this.$message.error('下载错误：获取文件流错误')
            })
          }
        }
      },
      // 删除图片
      imgDel(file) {
        var index = this.fileList.indexOf(file)
        var newList = this.fileList.slice()
        newList.splice(index, 1)
        this.fileList = newList

        //调用删除图片的接口
        fileInfoDelete({id: file.id}).then(() => {
          this.uploadedFileList.splice(index, 1)
          this.setFileList()
          return true
        })
      }      

/**
 * 下载文件
 * @param {Object} res
 */
export function downLoadFile(res) {
  var blob = new Blob([res.data], {
    type: 'application/octet-stream;charset=UTF-8'
  })
  var contentDisposition = res.headers['content-disposition']
  var patt = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
  var result = patt.exec(contentDisposition)
  var filename = result[1]
  var downloadElement = document.createElement('a')
  var href = window.URL.createObjectURL(blob) // 创建下载的链接
  var reg = /^["](.*)["]$/g
  downloadElement.style.display = 'none'
  downloadElement.href = href
  downloadElement.download = decodeURI(filename.replace(reg, '$1')) // 下载后文件名
  document.body.appendChild(downloadElement)
  downloadElement.click() // 点击下载
  document.body.removeChild(downloadElement) // 下载完成移除元素
  window.URL.revokeObjectURL(href)
}