vue2+ant design 使用到的文件上传&下载方法总结

1.excel表格上传

template部分，用到ant design的a-upload组件

<a-upload
                name="avatar"
                list-type="text"
                :before-upload="beforeUpload"
                :show-upload-list="false"
                :file-list="FileList"
                @change="FileChange"
                style=""
                accept=""
              >
                <a>
                  <i class="iconfont icon-shangchuan1"></i>
                  <span class="upload-title" v-if="FileList.length === 0">上传适文件</span>
                  <span class="upload-title" v-else>重新上传</span>
                </a>
              </a-upload>

js部分，不解析直接传文件给后端

beforeStoreUpload(file) {
// 判断文件类型
      const isJpgOrPng =
        file.type === 'application/vnd.ms-excel' ||
        file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
      if (!isJpgOrPng) {
        setTimeout(() => {
          this.FileList = []
        }, 200)
        this.$message.error('文件格式错误!')
      } else {
        if (file.size / (1024 * 1024) > 5) {
          this.$message.error('文件不能超过5M!')
        } else {
        const formData = new FormData()
      formData.append('file', file)
 // 这里存放需要的其他参数
      formData.append('www', this.www)
      formData.append('qqq', this.qqq)
        Api.upload(formData)
            .then((res) => {
            })
            .catch((err) => {
            })
        }

      }
    }

api封装部分（解析则不需要添加请求头）

export function upload(parameter) {
  return axios({
    url: `/upload`,
    responseType: 'blob',
// 添加请求头
    headers: {
      'Content-Type': 'multipart/form-data;charset=UTF-8'
    },
    method: 'post',
    data: parameter
  })
}

如需解析：

js

const reader = new FileReader()
        reader.readAsBinaryString(file)
        reader.onload = (e, rs) => {
          const f = e.target.result
          const workbook = XLSX.read(f, { type: 'binary' })
          const wsname = workbook.SheetNames[0]
          const ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname], { header: 1, defval: '#' })
          this.excelData = ws
          this.excelData.splice(0, 2)
          const m = []
          this.excelData.forEach((item) => {
            m.push(item[0])
          })

        }
        return false

2.excel表格下载

js方法

downloadStore() {
      const parameter = {
       // 调用接口的参数
      }

      Api.download(parameter).then((res) => {
         if (res) {
                  const xlsx = 'application/vnd.ms-excel;application/octet-stream;charset=UTF-8'
                  const blob = new Blob([res], { type: xlsx })
                  const a = document.createElement('a') // 转换完成，创建一个a标签用于下载
                  a.download = '表格名称.xlsx'
                  a.href = window.URL.createObjectURL(blob)
                  a.click()
                  a.remove()
                  this.$notification.success({
                    message: '成功',
                    description: res.message
                  })
                } else {
                  this.$message.error('导出失败')
                }
      })
    },

3.txt文件上传

template部分，用到ant design的a-upload组件

<a-upload list-type="text" :show-upload-list="false" :before-upload="beforeUpload">
                <a-tooltip placement="right">
                  <template slot="title">
                    每行一个code，最多一次性上传500条。
                  </template>
                  <a
                    type="primary"
                    :loading="confirmLoading"
                    href="javascript:;"
                  >
                    <a-icon type="upload" v-if="!confirmLoadingMat" />上传文件</a
                  >
                </a-tooltip>
              </a-upload>

beforeUpload(file) {

      const reader = new FileReader()
      reader.readAsText(file)
// 解析文件
      reader.onload = (e, rs) => {
        this.confirmLoading = true
        const i = e.target.result.split(/[\n\r]/)
        const m = []
        i.forEach(item => {
          if (item && item !== '') {
            m.push(item.trim())
          }
        })
// 将需要的参数放进m
        if (m.length > 500) {
          this.$notification.error({
            message: '错误',
            description: '上传条目过多',
            duration: 4
          })
          this.confirmLoading = false
        } else {
          const parameter = {
            // 参数
          }

        }
      }
    },

api部分同样需要添加responseType: 'blob',

4.图片上传

template

<a-upload
                      name="avatar"
                      list-type="picture-card"
                      :show-upload-list="{ showPreviewIcon: false }"
                      :before-upload="beforeUpload"
                      accept="image/jpeg,image/png,image/jpg"
                      @change="handleChange"
                      :file-list="fileList"
                      style=""
                    >
                      <div v-if="fileList.length < 8">
                        <a-icon :type="loading ? 'loading' : 'plus'" />
                        <div class="ant-upload-text">上传图片</div>
                      </div>
                    </a-upload>

js部分

 beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'
      if (!isJpgOrPng) {
        this.$message.error('图片格式错误!')
      } else {
        const reader = new FileReader()
        if (file?.originFileObj) {
          reader.readAsDataURL(file.originFileObj)
        } else {
          reader.readAsDataURL(file)
        }
        reader.onload = () => {
          const n = reader.result.split(/[,]/)
          const parameter = {
            imageBase64: n[1],
            imageName: file.name
          }
            })
        }
// 添加这行不会浏览器报错
        return false
      }
    },

图片格式问题

function getBase64(img, callback) {
  const reader = new FileReader()
  reader.addEventListener('load', () => callback(reader.result))
  reader.readAsDataURL(img)
}

handleChange(info, index) {
      const isJpgOrPng =
        info.file.type === 'image/jpeg' || info.file.type === 'image/png' || info.file.type === 'image/jpg'
      if (!isJpgOrPng) {
      } else {
        if (info.file.status === 'uploading') {
        getBase64(info.file.originFileObj, (imageUrl) => {
            this.imageUrl[index] = imageUrl
            this.fileList = info.fileList
          })
        }
      }
    },