Use o el-upload do element-ui para fazer upload e download de arquivos Excel

Requisito: depois que o front-end carrega o arquivo, o back-end aceita o arquivo para processamento e retorna diretamente o arquivo processado, e o front-end baixa o arquivo diretamente.

Normalmente, usamos diretamente o atributo de ação de el-upload para concluir diretamente a operação de upload de arquivo. Se você deseja baixar arquivos subsequentes diretamente, pode usar o código para operar com sucesso. Se houver um problema de permissão 401, você pode também definir cabeçalhos diretamente Atributos adicionam token, como segue:

 

<el-upload accept=".xls,.xlsx" drag  :limit="1"  :auto-upload="true" 
    :action="actionUrl"
    :headers="headers"
    :on-success="handleSuccess" >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">
        将文件拖到此处，或<em>点击上传</em>
    </div>
    <div class="el-upload__tip" slot="tip">* 请上传excel文件</div>
</el-upload>

actionUrl:`${this.BASEURL}/xxx`,   // 接口
headers:JSON.parse(sessionStorage.getItem('access_token')).content, //获取token

handleSuccess(){
    // 接口调用成功后文件下载
    let contentType = res.headers['content-type']
    let contentDisposition = res.headers['content-disposition']
    if (contentType.indexOf('application/json') !== -1) {
    } else {
        contentDisposition = contentDisposition.split(';')[1]
        let filename = contentDisposition.split('=')[1]
        let filenameStr = window.decodeURI(filename.split(',')[0], 'utf-8')
        const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
        const link = document.createElement('a')
        const href = window.URL.createObjectURL(blob)
        // 后台在header中传文件名
        link.href = href
        link.download = filenameStr
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link) // 下载完成移除元素
        window.URL.revokeObjectURL(href) // 释放掉blob对象
    }
}

Mas el-upload não suporta a configuração do responseType. Se você deseja definir o responseType, pode ajustar honestamente a interface e escrevê-lo você mesmo. Use http-request para alcançá-lo, da seguinte forma:

<el-upload accept=".xls,.xlsx" drag action="#" :limit="1" :auto-upload="true"
    :http-request="upAndDowndoad"
    :before-upload="beforeUpload" 
    :on-exceed="handleExceed"
    :file-list="fileList">
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">
        将文件拖到此处，或<em>点击上传</em>
    </div>
    <div class="el-upload__tip" slot="tip">* 请上传少于1000行的excel文件</div>
</el-upload>

 * action é um parâmetro obrigatório, que pode ser escrito como action="#" para evitar relatórios de erros

upAndDowndoad(params) {
    // 获取文件 通过FormData将文件转化为二进制流的形式传给后端
    let form = new FormData()
    form.append('file', params.file)
    upAndDownload(form).then((res) => {
        let contentType = res.headers['content-type']
        let contentDisposition = res.headers['content-disposition']
        if (contentType.indexOf('application/json') !== -1) {
        } else {
            contentDisposition = contentDisposition.split(';')[1]
            let filename = contentDisposition.split('=')[1]
            let filenameStr = window.decodeURI(filename.split(',')[0], 'utf-8')
            const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
            const link = document.createElement('a')
            const href = window.URL.createObjectURL(blob)
            // 后台再header中传文件名
            link.href = href
            link.download = filenameStr
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link) // 下载完成移除元素
            window.URL.revokeObjectURL(href) // 释放掉blob对象
        }
    })
        .then(() => {
            this.fileList = []  // 将文件列表置空
        })
        .catch((res) => {
            this.fileList = []  // 将文件列表置空
        });
},

// 接口文件
export function upAndDownload(data) {
    return request({
        url: '/xxx',
        responseType: "arraybuffer",
        method: 'post',
        data
    })
}

Ao mesmo tempo, você pode usar beforeUpload para limitar o tipo de upload de arquivo e usar handelExceed para limitar o número de uploads de arquivo

beforeUpload(file) {
    let legalName = ['xlsx', 'xls']
    // 拿到后缀名
    let name = file.name.substring(file.name.lastIndexOf('.') + 1, file.name.length)
    if (legalName.includes(name)) {
        // console.log(legalName.includes(name));
    } else {
        this.$message.warning('文件格式不对，仅限xls和xlsx')
        return false
    }
},
handleExceed(files, fileList) {
    this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length } 个文件`
    );
},

Obrigado por assistir, se você tiver alguma dúvida, aponte-a ᕦ(･ㅂ･)ᕤ