前端进阶（十五）前端上传Excel文件，后端成功返回Json格式失败返回Excel

绝地灬酷狼 2022-01-29 09:15 486阅读 0赞

html文件

<div style="display: inline-flex">上传excel文件：
        <input name="fileinfo" type="file" id="avatar"         
              accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,
                       application/vnd.ms-excel" multiple style="width: 320px;" />
    </div>
    <div style="display: inline-flex">
        <input type='submit' value="上传Excel文件" id="uploadFileBtn"
         style="border-radius: 10px;float:right;margin-top: 15px;font-size: 14px;float: right;"
                  href="#" class="btn-flat btn-success mr-5" />
    </div>

js文件

$body.on('click', '#uploadFileBtn', function (e) {
        var data = new FormData(document.forms.namedItem("fileinfo"));
        try {
            var xhr = new XMLHttpRequest();
            // xhr.open('POST', '../api/f9/ver2/excel/upload', true);
            xhr.open('POST', '../api/f9/titles', true);
            xhr.responseType = "blob";
            xhr.onreadystatechange = function () {
                // console.log(xhr);
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var blob = new Blob([xhr.response]);
                    if (xhr.response.type !== 'text/plain') {
                            
                        var reader = new FileReader();
                        var res;
                        reader.onloadend = function(ev){
                            res = reader.result;
                            if(res.result === 0){
                                //success...
                            }else{
                                //error...
                            }
                        }
                        reader.readAsText(blob);
                    } else {
                        //error, return excel file...
                        var url = window.URL.createObjectURL(blob, {
                            type: 'application/vnd.ms-excel'
                        });
                        var a = document.createElement('a');
                        a.download = 'error.xls';
                        a.href = url;
                        $body.append(a);
                        a.click();
                        $(a).remove();
                    }                                
                };
            };
            xhr.send(data);
    
        } catch (e) {
            //添加错误逻辑
        } finally {
            //其他业务逻辑
        }    
    });

注意：

（1）本次采用原生js请求+formdata完成数据上传，返回blob数据，如果成功返回json使用fileReader解析，失败则返回excel文件。如果不需要返回excel文件，则不需要使用原生js请求

（2）思路：请求采用formdata形式将文件以二进制流形式传到后端，不能在表单上添加action，否则会刷新页面；后端接收类型设置为blob类型，然后用fileReader以text读取，判断类型是blob格式或者excel格式，分别处理。