antd vue 文件上传实例

antd vue 文件上传实例

说明

该实例是后端进行文件上传至minio服务器
这里仅仅是展示前端antd vue得代码

限制文件类型配置查看
这里

<template>
  <a-upload
    :headers="headers"
    :action="url"
    :fileList="fileList"
    @change="handleChange"
    :beforeUpload="beforeUpload"
  >
    <a-button :disabled="isShow"> <a-icon type="upload" /> Upload </a-button>
  </a-upload>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'MinioUplode',
  // 此处接收仅仅针对有有父组件得情况，如果直接使用a-upload则不需要
  props: {
    url: {
      type: String,
      default: 'api/storage/upload'
    },
    fileListTemp: {
      type: Array,
      default: () => []
    },
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      fileList: this.fileListTemp,
      // 请求头里要携带token用来识别身份
      headers: {
        'Authorization': 'Bearer' + this.token()
      }
    }
  },
  methods: {
    ...mapGetters(['token']),
    // 此方法主要用来处理回显列表，以及去除没有实际上传得文件
    // 图片一旦长传在file中会有status字段，如果没有则没有实际上传
    // status有四种状态  'uploading' 'done' 'error' 'removed'
    handleChange (info) {
      let fileList = [...info.fileList]
      // 这里用来处理，页面中展示已经上传得个数
      // .slice(),括号里是负数是从尾部开始截取 限制最长15
      fileList = fileList.slice(-15)
      // 此处去除fileList中status为undefined得对象
      // 注意此处不是null！！！！
      fileList = fileList.filter(item => item.status !== undefined)
      // 从后端得回调 response 中获取url，并复制给fileList对象得url
      // 作用，有了url 前端才可以下载查看
      fileList = fileList.map(file => {
        if (file.response) {
          // 获取回调url
          file.url = file.response.data.url
        }
        return file
      })
      this.fileList = fileList
    },
    beforeUpload (file) {
      // 此处针对修改操作时，如果之前没有数据this.fileList时null 进行...this.fileList会报错
      // 错误类型： Invalid attempt to spread non-iterable instance
      if (this.fileList === null) {
        this.fileList = []
      }
      const list = [...this.fileList]
      // 限制最多只能穿15个文件
      const listLength = list.length > 14
      console.log(list.length, 'list.length')
      if (listLength) {
        this.$message.warning('最多上传15个文件')
      }
      // 限制单个文件的大小不大于100MB
      const size = file.size / 1024 / 1024 > 100
      if (size) {
        this.$message.warning('上传文件不能大于100MB')
      }
      // 返回时注意，此处要把所有得标识flag全部返回并且使用&
      // 原因：有一个条件不满足，就不能进行文件上传
      return !size && !listLength
    }
  },
  // 此处监听仅仅针对有有父组件得情况，如果直接使用a-upload则不需要
  watch: {
    fileList (val) {
      this.fileList = val
      // 向父组件更新
      this.$emit('updateFileList', val)
    },
    fileListTemp (val) {
      this.fileList = val
    }
  }
}
</script>
<style scoped>
</style>