前后端分离,文件下载如何处理?

  • 正常情况下只需要请求url地址,后端会强制浏览器下载(此处由laravel header头处理)
  • 项目前后端使用api形式构建,前端每次请求都需要向后端发送token令牌。
  • vue里面<a href="/images/myw3schoolimage.jpg" download="w3logo">好像这样可以下载,但是这里请求未带token,所以改用了fecth的形式
  • 现在后端验证了token,返回了数据(乱码形式),却并没有强制浏览器下载,请问该如何处理?
阅读 13.5k
5 个回答

看到后端是PHP,header修改,最后把图片直接echo出来,而不是返回给前端。

你可以试试这个

function saveFile(url) {
  return new Promise(function(resolve, reject) {
    // Get file name from url.
    var filename = url.substring(url.lastIndexOf("/") + 1).split("?")[0];
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = function() {
      resolve(xhr);
    };
    xhr.onerror = reject;
    xhr.open('GET', url);
    xhr.send();
  }).then(function(xhr) {
    var a = document.createElement('a');
    a.href = window.URL.createObjectURL(xhr.response); // xhr.response is a blob
    a.download = filename; // Set the file name.
    a.style.display = 'none';
    document.body.appendChild(a);
    a.click();
    return xhr;
  });
}

function download(urls) {
  return Promise.all(urls.map(saveFile));
}

来源

返回一个下载的url链接地址呀

(解决了)其实就是搞清楚一个问题关键点:请求一个url,该url需要带上token信息,请求验证通过后,后端会强制浏览器下载;
上面问题有个命题误区就是一开始限定了token必须放在header里面,所以必须要使用fetch的形式去获取,然后一直纠结怎么把fetch到的数据转成文件;
其实只需要把token放在url里面让后端在url取出并验证,响应自然就成了下载啦。

新手上路,请多包涵

验证token以后。返回图片地址/images/myw3schoolimage.jpg

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题