vue.ant.design 附件上傳及圖片上傳封裝

<template>
  <div class="myFileList">
    <a-upload :fileList="fileList" :remove="handleRemove" :beforeUpload="beforeUpload">
      <a-button>
        <a-icon type="upload" />上傳附件
      </a-button>
    </a-upload>
  </div>
</template>

<script>
import { attachDelete,attachPage } from '@/api/file'
import axios from 'axios'
export default {
  name: 'FileUpload',
  props: {
    filelength: {
      type: [Number,String],
      default: 0
    },
  },
  data() {
    return {
      removeIds: [],
      URL: process.env.VUE_APP_API_BASE_URL,
      token: this.$store.getters.token,
      fileList: []
    }
  },

  mounted() {},
  methods: {
    getFile(obj) {
      const data={}
      for(let key in obj){
        if(!data.eqs){
          data.eqs=[]
        }
        const eq={}
        eq.key=key
        eq.val=obj[key]
        data.eqs.push(eq)
      }
      let vm = this
      vm.fileList.length=0
      attachPage({...data,size:-1}).then(res=>{
        res.data.records.map(res => {
        const file = {}
        file.uid = res.id
        file.name = res.oldFileName
        file.url = vm.URL + '/file/attach/download?attachId=' + + res.id
        vm.fileList.push(file)
      })
      })
    },
    handleDelete(){
      if(this.removeIds.length>0){
        attachDelete(this.removeIds.join(',')).then(res=>{
          console.log(res)
        })
      }
    },
    handleSave(attachType, relationId) {
      let vm = this
      return new Promise((resolve, reject) => {
        const formData = new FormData()
        let index=0
        vm.fileList.forEach(file => {
          if (file.size) {
            formData.append('file', file)
            index++
          }
        })
        formData.append('attachType', attachType || '')
        formData.append('relationId', relationId || '')
        if(formData.get('file')==null){
          if(vm.removeIds.length>0){
            vm.handleDelete()
          }
          return resolve()
        }
        axios({
          method: 'post',
          url: vm.URL + '/file/attach/batchUpload',
          data: formData,
          headers: {
            Authorization: vm.token
          }
        }).then(res => {
          if(res.data.code!==0){
            reject(res.data.msg)
          }else{
            vm.handleDelete()
            resolve(res.data)
          }
        }).catch(err=>{
          reject(err)
        })
      })
    },
    handleRemove(file) {
      if (!file.size) {
        this.removeIds.push(file.uid)
      }
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()
      newFileList.splice(index, 1)
      this.fileList = newFileList
    },
    beforeUpload(file) {
      if(this.filelength!=0&&this.filelength==this.fileList.length){
        return  this.$message.warning('最高只能上傳'+this.filelength+'個附件');
      }
      this.fileList = [...this.fileList, file]
      console.log(this.fileList)
      return false
    }
  }
}
</script>

<style lang="less" scoped>
.myFileList{
  /deep/ .ant-upload-list-item-name{
  display: inline;
}
}

</style>

多附件上傳功能

import { FileUpload } from '@/components/FileUpload'

<file-upload ref="fileUpload" :filelength="5"/>

filelength:最多上傳多少附件

this.$refs.fileUpload.setFile(list) 回顯附件列表 list 附件接口返回列表

this.$refs.fileUpload.handleSave({attachType:attachType, relationId:id}).then(ers=>{

console.log(ers) //保存成功返回

}).catch(err=>{

console.log(err) //保存失敗返回

})

保存方法 attachType，relationId傳入的類型和關聯Id

回調函數可不寫

this.$refs.fileUpload.handleSave(attachType, relationId)

 

圖片上傳

<template>
  <div class="clearfix">
    <a-upload
      listType="picture-card"
      :fileList="fileList"
      @preview="handlePreview"
      :beforeUpload="beforeUpload"
      @change="handleChange"
      :remove="handleRemove"
    >
      <div v-if="fileList.length < imgLength">
        <a-icon type="plus" />
        <div class="ant-upload-text">上傳圖片</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'
import { imagePage,imageDelete } from '@/api/file'
export default {
  name: 'PictureUpload',
  props: {
    imgLength: {
      type: [Number, String],
      default: 10
    }
  },
  data() {
    return {
      previewVisible: false,
      previewImage: '',
      uid: 0,
      removeIds: [],
      URL: process.env.VUE_APP_API_BASE_URL,
      token: this.$store.getters.token,
      fileList: []
    }
  },

  mounted() {},
  methods: {
    handleCancel () {
      this.previewVisible = false
    },
    handlePreview (file) {
      this.previewImage = file.url || file.thumbUrl
      this.previewVisible = true
    },
    handleChange({ fileList }) {
      //debugger
      //this.fileList = fileList
    },
　　
    getFile(obj={}) {
　　　　//回顯獲取圖片list
      const data={}
      for(let key in obj){
        if(!data.eqs){
          data.eqs=[]
        }
        const eq={}
        eq.key=key
        eq.val=obj[key]
        data.eqs.push(eq)
      }
      let vm = this
      vm.fileList.length=0
      imagePage({...data,size:-1}).then(res=>{
        res.data.records.map(res => {
        const file = {}
        file.uid = res.id
        file.name = res.oldFileName
        file.url = vm.URL + '/static-image/' + res.filePathName
        vm.fileList.push(file)
      })
      })
    },
    handleDelete() {
　　　　//刪除圖片
      if (this.removeIds.length > 0) {
        imageDelete(this.removeIds.join(',')).then(res => {
          console.log(res)
        })
      }
    },
    handleSave(attachType, relationId) {
      let vm = this
      return new Promise((resolve, reject) => {
        const formData = new FormData()
        let index = 0
        vm.fileList.forEach(file => {
          if (file.size) {
            formData.append('file', file)
            index++
          }
        })
        formData.append('imageType', attachType || '')
        formData.append('relationId', relationId || '')
        if (formData.get('file') == null) {
          if (vm.removeIds.length > 0) {
            vm.handleDelete()
          }
          return resolve()
        }
        axios({
          method: 'post',
          url: vm.URL + '/file/image/batchUpload',
          data: formData,
          headers: {
            Authorization: vm.token
          }
        })
          .then(res => {
            if (res.data.code !== 0) {
              reject(res.data.msg)
            } else {
              vm.handleDelete()
              resolve(res.data)
            }
          })
          .catch(err => {
            reject(err)
          })
      })
    },
    handleRemove(file) {
      if (!file.size) {
        this.removeIds.push(file.uid)
      }
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()
      newFileList.splice(index, 1)
      this.fileList = newFileList
    },
    beforeUpload(file) {
      let src = ''
      let cm = this
      getBase64(file, imageUrl => {
        src = imageUrl
        file.url = src
        cm.fileList = [...cm.fileList, file]
      })

      return false
      if (this.filelength != 0 && this.filelength == this.fileList.length) {
        return this.$message.warning('最高只能上傳' + this.filelength + '個附件')
      }
      this.fileList = [...this.fileList, file]
      console.log(this.fileList)
      return false
    }
  }
}
</script>

<style lang="less" scoped></style>