javascript - 在vue js中使用axios post方法下载文件

Question

我正在尝试使用 axios(post 方法)下载文件，一切看起来都很好，但是我打开文件的时候会遇到这个错误

这是我的网络选项卡:

请求 header :

Host: 127.0.0.1:8000
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:75.0) Gecko/20100101 Firefox/75.0
Accept: application/json, text/plain, */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
X-Requested-With: XMLHttpRequest
Content-Type: application/json;charset=utf-8
Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIxIiwianRpIjoiYzQwYmI3MWE3MDg2MTI5YjE4OWI1NWVmODg3N2QzZTEzYTU0ODhkYTJhNDgwZDc3NTZkOTFiMzlmZWU3M2RjNDliNjE0YTBkZDc3M2U2NTUiLCJpYXQiOjE1ODY2ODQ1MTgsIm5iZiI6MTU4NjY4NDUxOCwiZXhwIjoxNjE4MjIwNTE4LCJzdWIiOiIyIiwic2NvcGVzIjpbXX0.BBKzN7cnHVGu1S5woLF3XWzb63uzjeZpVCA437LqmFJ7evPMEm9hZ8S3zd1kWvBPHieDwaUYEypWSyP1mH8PwhgVuZa3oMMlx_80BzApPoWFVQR6DeMZowQKuH71Wi7dEsLJb_F3bJXddgYwuB9m7Gsxb4tTo5zyrEx7GzMqCusGvQfr0qfs-0iUW7wMXQ2GxeiS-Ae7mBCK361lDJauC3ozGjaLi-NQ5Gg9wb9dat4NdSp9tAall2f7-BUlOtTV2H8fOIIl5tI8cFBQaloyXWMIvk7dX8PVxxjAT9DzPYJ8rLFSRYvG_ZRkyXL-QMdr0MuXHp5UIC595UlW67JqraPTR0AMaCaviL5jKAWMtcmdsW7lVT3nxfQz-8Pg6hd9g-a_cc-Npd3qqrch6_sdQv_OLh3BQeWHbwLgRD5m5UGSzoIPhQG6BeB77EeqRMNlUQ2wErB4qEXGT13A-J39RjBpTvNSsNtrtkloOYFrSb0i7uGWHjZLp6Bm2qv_h37aGDAjowTLChHJ6_0YSkOqWg4ReADQf7XOyE6mTDYGW_9j7XuCdBi2EDv0E1hkWWV0G-ZCV15qtPoRBi9LcB9aR_eaSohvfzpyhI1Lqn8fJWSzWqorN2nqooUhuXCh3UcqZksn8vIES1OWUWHSfeKpMGe3kxlPA5_3tPfMXtm2IAc
X-XSRF-TOKEN: eyJpdiI6ImVtaGEyYXN4Q1wvQkdkb3M3UGZ5eTNBPT0iLCJ2YWx1ZSI6IkR5WE5RUHczM1ExMVIwc1NGK09kaXNsSyttTDNhY1JicWlDT1hDOU1GbU9FWllIY2lDdVJkdDF1VG8yQkd6QmciLCJtYWMiOiJlODE3ODAwYzUxMTUwZTNlYzYyZmIxOTI3MDE5ZWNjMWNhNGJjMjFlMmIxYmU4NGMxMWE1YTFiMjc0NGZkMjk0In0=
Content-Length: 69
Origin: http://127.0.0.1:8000
Connection: keep-alive
Referer: http://127.0.0.1:8000/
Cookie: XSRF-TOKEN=eyJpdiI6ImVtaGEyYXN4Q1wvQkdkb3M3UGZ5eTNBPT0iLCJ2YWx1ZSI6IkR5WE5RUHczM1ExMVIwc1NGK09kaXNsSyttTDNhY1JicWlDT1hDOU1GbU9FWllIY2lDdVJkdDF1VG8yQkd6QmciLCJtYWMiOiJlODE3ODAwYzUxMTUwZTNlYzYyZmIxOTI3MDE5ZWNjMWNhNGJjMjFlMmIxYmU4NGMxMWE1YTFiMjc0NGZkMjk0In0%3D; laravel_session=eyJpdiI6ImJjSGQ3bFR3QlpsQnhuN2tVNzZDRGc9PSIsInZhbHVlIjoiUmkzeWJnUURDdld1bitaUlwvVXNxbzgwNU56SkRFcExQbXlhdVpXZlorRW1RaFRcL1p4dlh0TjZMZVVmNDBKTkhXIiwibWFjIjoiOGNmY2Q2OTdkNmFkNWNkMTAxNTBlYTMwNTlhZGMwYTBiNGU2MDM5NWFkODkyNjY0OTQ2MjNiMGY3Y2RlMGE4MiJ9

响应头

服务器端(Laravel):

$path=$request->file;
if(Storage::exists($path))
{
    $file=Storage::get($path);
    $type=Storage::mimeType($path);
    $response = Response::make($file, 200);
    $response->header("Content-Type", $type);
    return $response;
}

客户端(Vue):

  axios.post('/api/downloadFile',{'file':item}).then(res=>{
                  let blob = new Blob([res.data], { type: res.headers['content-type'] });
                  let link = document.createElement('a');
                  link.href = window.URL.createObjectURL(blob);
                  link.download =item.slice(item.lastIndexOf('/')+1);
                  link.click()
              }).catch(err=>{

              })

Answer 1

当你指定responseType时它起作用吗？

  axios.post('/api/downloadFile',
  { 'file':item },
  { responseType: 'blob' })
  .then(res => {
    let blob = new Blob([res.data], { type: res.headers['content-type'] });
    let link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download =item.slice(item.lastIndexOf('/')+1);
    link.click()
  }).catch(err => {})