Use el-upload de element-ui para cargar y descargar archivos de Excel

Requisito: después de que el front-end cargue el archivo, el back-end acepta el archivo para su procesamiento y devuelve directamente el archivo procesado, y el front-end descarga el archivo directamente.

Por lo general, usamos directamente el atributo de acción de el-upload para completar directamente la operación de carga de archivos. Si desea descargar archivos posteriores directamente, puede usar el código para operar con éxito. Si hay un problema de permiso 401, puede también establece directamente encabezados Atributos agregar token, de la siguiente manera:

 

<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对象
    }
}

Pero el-upload no admite configurar el tipo de respuesta. Si desea configurar el tipo de respuesta, honestamente puede ajustar la interfaz y escribirlo usted mismo. Use http-request para lograrlo, de la siguiente manera:

<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>

 * la acción es un parámetro obligatorio, que se puede escribir como acción="#" para evitar informes de errores

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
    })
}

Al mismo tiempo, puede usar beforeUpload para limitar el tipo de carga de archivos y usar handelExceed para limitar la cantidad de cargas de archivos.

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 } 个文件`
    );
},

Gracias por mirar, si tiene alguna pregunta, por favor señale ᕦ(･ㅂ･)ᕤ