上传文件

上传文件需要将请求头的Content-Type设置为multipart/form-data

let file = e.target.files[0]; let data = new FormData(); //创建form对象 data.append('file',file);//通过append向form对象添加数据 data.append('chunk','0'); axios.post( "http://localhost:8081/api/peixun/vedio/uploadVideo", data, { headers: { "Content-Type": "multipart/form-data" } } ).then(function (data) { console.log(data); }, function (err) { console.log("err------: "); console.log(err); })

下载(导出)文件

axios({ method: 'post', url: 'http://127.0.0.1/detail/list/export?mealcomeTime=1558691428000&rand=9848', responseType: 'blob', data: {"materialId":7079075,"beginDate":"2019-05-01 00:00:00","endDate":"2019-05-24 23:59:59","shipUnitId":4,"firstUnitId":4,"secondUnitId":4,"customerIds":[],"sortType":"","sortField":"","pageIndex":1,"pageSize":50}, headers: { sessionId: 'c22824d846c94a459bf60cf286349399', sign: 'a29b3e56399e58d91459be2e64a8dbf9ecbfcd8097af08fb38ede3c64b15a889', } }).then(response => { let fileName = window.decodeURI(response.headers['content-disposition'].split('=')[1]); let link = document.createElement("a"); link.href = window.URL.createObjectURL(new Blob([response.data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"})); link.target = "_blank"; link.download = fileName; document.body.appendChild(link); link.click(); document.body.removeChild(link); })

注意: responseType是axios的参数，不是在请求头里设置。之前在拦截器中加在请求头里，下载的文件乱码了

content-disposition

拿不到文件名? 需要后台响应头设置

"Access-Control-Expose-Headers": "Content-Disposition"

意思让浏览器能访问这个响应头的Content-Disposition属性内容

相关文档

https://github.com/axios/axios/issues/895 I misunderstood the concept of CORS. Access-Control-Expose-Headers is a response header issued by the service. This issue has nothing to do with axios. The service should allow Content-Disposition header to be exposed for the client, in my case it does. Due to HTTP access control CORS in browsers, the client application needs a proxy cors (in my case an express middleware) to read the header value. Apologies for misunderstanding.