Detalhes de upload do arquivo Ant Design Vue

16314725:

Carregamento de arquivo baseado em Ant design Vue (arquivo XSLX)

Carregar Carregar

modelo

<a-upload
	name="multipartFile"
	:multiple="false"
	:action="action"
	methods="post"
	@change="uploadFile"
	:file-list="fileList"
	:disabled="disabled"
	:headers="{
    
    
	Authorization: 'Bearer ' + token,
	}"
>
	<a-button><a-icon type="upload"/>
		点击上传
	</a-button>
</a-upload>

Parâmetros detalhados

1. nome

name O nome do parâmetro do arquivo enviado para a string de fundo 'file'

2. múltiplo: (isso é determinado de acordo com suas próprias necessidades de negócios) falso: não suportado verdadeiro: suportado

multiple Se deve suportar arquivos de seleção múltipla, suporte ie10+. Após abrir, mantenha pressionada a tecla Ctrl para selecionar vários arquivos. booleano falso

3.action: (ou seja, a interface de upload para desenvolvimento back-end)

String de URL enviada pela ação |(arquivo) => Promessa Nenhuma

// return 里面写的就是后端开发的上传接口了 参数记得是写在上面的name里面哦
computed:{
    
    
	action () {
    
    
      if (process.env.NODE_ENV === 'development') {
    
    
        return ''
      } else if (process.env.NODE_ENV === 'test') {
    
    
        return ''
      } else if (process.env.NODE_ENV === 'production') {
    
    
        return ''
      } else if (process.env.NODE_ENV === 'dev') {
    
    
        return ''
      }
    }
}

4.métodos: (Não há nada a dizer sobre isso hahaha)

método Método HTTP string 'post' da solicitação de upload 1.5.0

5.@change: O estado quando o arquivo enviado muda (núcleo)

change O status quando o arquivo enviado é alterado Função Nenhum

methods:{
    
    
   // 上传文件
   uploadFile (info) {
    
    
     console.log('上传文件', info)
     // ant design 框架中此回调会运行三次，上传中、完成、失败都会调用这个函数。
     if (info.event) {
    
    
       // 只判断是完成的时候
       this.importfile(info.file)//  核心函数
     }
     const fileList = [...info.fileList]
     this.fileList= fileList.slice(-1)
     if (info.file.status === 'uploading') {
    
    
       this.$loading.show()
       return
     }
     if (info.file.status === 'done') {
    
    
       // 上传成功 可以在下面写自己也业务逻辑了
       this.$loading.hide()
     }
   },
    //  上传之前回调，判断上传类型
   beforeUploadcl (file) {
    
    
     const flag= file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
     if (!flag) {
    
    
       this.$message.error('请选择xlsx类型文件')
       this.fileList= []
     }
     return flag
   },
   // 核心函数
   importfile (obj) {
    
    
     const that= this
     const reader = new FileReader()
     reader.readAsArrayBuffer(obj.originFileObj) //  需要传blob类型
     reader.onload = function () {
    
    
       const buffer = reader.result
       const bytes = new Uint8Array(buffer)
       const length = bytes.byteLength
       let binary = ''
       for (let i = 0; i < length; i++) {
    
    
         binary += String.fromCharCode(bytes[i])
       }
       const XLSX = require('xlsx') //  引用
       const wb = XLSX.read(binary, {
    
    
         type: 'binary'
       })
       const outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
       console.log(outdata) // 此为取到的excel中内容，然后就可以自己改数据，画页面啦~
     }
   },
}

6.fileList: This.fileList correspondente ao código acima

fileList A lista de arquivos enviados (controlados) object[] Nenhum

7. deficiente

desativado Se deseja desativar booleano falso

8: cabeçalhos (deve ser direcionado a necessidades específicas de negócios, geralmente há muito poucos problemas de cabeçalhos)

headers Define o cabeçalho da solicitação de upload, objeto válido acima do IE10 Nenhum

9. A propósito, o tipo do botão também é mencionado hahaha, basta ir até o ícone do ícone para selecionar o ícone que você gosta e colocar no tipo para adicionar um ícone ao botão