antd-design-vue上传组件（upLoad）使用总结

项目需求中总是会有上传图片文件等功能，现在有时间正好做下简单总结

一般常用的几个属性就是 fileList,customRequest,multiple,showUploadList,before

 常用事件就是change

1、multiple

    这个就是在选择文件的时候是否能够多选，设置为true可以多选，不必多说

2、showUploadList

     这个属性如果设置为 :showUploadList=false的话，就是不展现上传后的列表

    

 就是这个列表将不做展示

如果设置 { showPreviewIcon?: boolean, showRemoveIcon?: boolean } 就可以控制图标中的删除和预览按钮的是否显示

3、beforeUpload

  这个是最最常用的，用来控制文件上传前的格式，或者文件大小等属性的校验

<a-uplaod   
 :beforeUpload="beforeUpload"
 :fileList="fileList"
>

<script>
export default{
   data(){
     return {
        fileList:[]
     }
   },
   methods:{
     beforeUpload(file,UpFileList)
        // file：上传单个文件时候的文件内容，UpFileList：上传多个文件时的文件内容组成的数组
         // 1、控制文件数量
        if (this.fileList.length + UpFileList.length > 10) {
         this.$message.warning('超过文件上传数量限制')
          // 设置上传的文件为错误状态
         file.status = 'error'
         return false
       }
        // 2、控制上传的文件大小
       if (file.size > 1073741824) {
          this.$message.warning('文件大小超过最大限度1G')
          file.status = 'error'
          return false
       }
       // 3、控制上传文件不能为空
       if (file.size === 0) {
         this.$message.warning('所选信息中存在空文件或目录，请重新选择')
         file.status = 'error'
         return false
       }
      // 4、控制已上传文件不重复
       this.fileList.map(item=>{
         if(item.name===file.name){
           this.$message.warning('不允许重复上传')
           file.status = 'error'
           return false
         }
       })
     // 5、控制上传文件的类型 arr是上传类型的白名单
      const type = file.name.slice(file.name.lastIndexOf('.') + 1).toLowerCase()
      const arr = ['.jpg', '.png', '.jpeg']
      if (arr.includes('.' + type)) {
        return true
      } else {
        this.$message.warning(`不支持以 .${type} 扩展类型的文件或图片上传!`)
        file.status = 'error'
        return false
      }

    }
}
</script>

4、customRequest

这个属性好用且常用

<a-upload
 :fileList="fileList"
 :customRequest="customRequest"

>

</a-upload>
<script>
 export default{
   data(){
     return{
       fileList:[]
     }
   },
   methods:{
     // 自定义上传，可以自定义上传接口，不用通过action属性，还是非常灵活的
     customRequest(file){
       // file 是上传的文件 其内容会在放在下面截图中
       // 后端需要接受的参数是 formData数据，
       const form = new FormData()
       form.append('file', file.file)
        // uploadFile 我自己的接口
       uploadFile(form).then(res => {
       if (res.success) {
          // 调用组件内方法, 设置为成功状态
          file.onSuccess(res, file.file)
          file.status = 'done'
        } else {
          file.onError()
          file.status = 'error'
        }
      })
     }

   },
   // 设置好头部
  uploadFile (parameter) {
    return axios({
      url: api.uploadFile,
      method: 'post',
      headers: { 'Content-Type': 'multipart/form-data' },
      data: parameter
    })
   }

}
</script>

5 change事件

<a-upload
 :fileList="fileList"
 :customRequest="customRequest"
 @change="uploadChange"
>

</a-upload>
<script>
 export default{
   data(){
     return{
       fileList:[]
     }
   },
   uploadChange(file,fileList,){
     this.fileList = fileList.filter(item => item.status !== 'error')
     // 项目需求自己写趴
   }
   // file对象里的内容
   // uid: 'uid',      // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
   // name: 'xx.png',   // 文件名
   // status: 'done', // 状态有：uploading done error removed
   // response: '{"status": "success"}', // 服务端响应内容
   // linkProps: '{"download": "image"}', // 下载链接额外的 HTML 属性
   // xhr: 'XMLHttpRequest{ ... }', // XMLHttpRequest Header


}
</script>