vue，axios踩坑总结

最近在写新系统，公司给的前端demo都是jquery实在是难用的很，2019年还在用这个无疑等于人家已经发明了高铁你还教人骑自行车。于是就自己在项目中简单的引了一下vue和一些插件，告别了繁琐的dom操作，但是使用过程中也遇到了很多的问题，值得记录下来。

【input标签+axios实现文件的上传与下载】

网上关于文件上传与下载的vue写法基本都是基于element-ui，但是ui与公司要求的统一样式出入太多。于是只好在公司的规定样式基础上，结合网上的经验自己实现了。代码如下（前提是已经引入了axios）
实现的核心就是blob


export : function(){
axios({

method:"post",

    url: url,//url自己定义后端的url

    responseType:"arraybuffer"//responseType必须设置成arraybuffer

}).then(function (response) {
//文件名自己定义
let filename ="demo.xls";

 this.fileDownload(response.data, filename);fileDownload方法源码在下方

    }.bind(this)

).catch(

function (error) {

alert("网络请求出错");

    }.bind(this)

);
}
//网上找的代码
fileDownload: function (data, fileName) {
            let blob = new Blob([data], {
                type: "application/octet-stream"
            });
            let filename = fileName || "mccExcelTemplate.xls";
            if (typeof window.navigator.msSaveBlob !== "undefined") {
                window.navigator.msSaveBlob(blob, filename);
            } else {
                var blobURL = window.URL.createObjectURL(blob);
                var tempLink = document.createElement("a");
                tempLink.style.display = "none";
                tempLink.href = blobURL;
                tempLink.setAttribute("download", filename);
                if (typeof tempLink.download === "undefined") {
                    tempLink.setAttribute("target", "_blank");
                }
                document.body.appendChild(tempLink);
                tempLink.click();
                document.body.removeChild(tempLink);
                window.URL.revokeObjectURL(blobURL);
            }
        }

以上的axios不借助其它插件实现的文件下载，只要页面上的按钮绑定export 方法就可以

【axios文件上传的response无法解析】
用axios实现了简单的文件上传，后端用map包装了返回值returnCode和returnMsg，但是在js代码中并不能取到这两个值

 axios({
                method: "post",
                url: '/cfile/import',
                responseType: "json",//responseType设置成json才能取到后端返回的json字符串
                data: fileFormData,
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }).then(function (resp) {
                    if (resp.data.status != '200') {
                        dialogAlert('error' + resp.data.resMsg, 2);
                    } else {
                        dialogAlert('success', 2);
                    }
                }
            )

由于文件上传设置的header的content_type不再是json，因此response需要手动设置成json才能获取到后端返回的json

最后编辑于：2019.02.18 23:21:12