需求：

上传更换都做好了，被下载功能卡了一天，试了好多种方法，具体场景就不去介绍了，可自行测试，代码全贴上：

html:
<div class="downloadBtn" @click="handleDownload(index)">
 <span class="downloadBtn_txt">下载</span>
</div>
js:
// 下载
handleDownload (index) {
  // window.location.href  = 'http://192.168.1.100:8006/' + 		    this.queryData.FileDtoList[index].FileURL
  // 同源 一
  var alink = document.createElement("a")
  // 获取当前图片的url
  alink.href = '/' + this.queryData.FileDtoList[index].FileURL
  // 获取后台返回文件名
  let newStr = this.queryData.FileDtoList[index].FileURL
  // 首先要去掉双引号，然后再去掉反斜杠,最后返回数组
  let arr = newStr.replace('"','').replace(/[\\]/g,',').split(',')
  alink.download = arr[arr.length-1]
  alink.click();
  // 不同源 二
  // let newUrl = 'http://192.168.1.100:8006/' + this.queryData.FileDtoList[index].FileURL
  // let url =  this.queryData.FileDtoList[index].FileURL
  // let arr = url.replace('"','').replace(/[\\]/g,',').split(',')
  // let nameStr = arr[arr.length-1]
  // 调用方法
  // this.downloadIamge(newUrl, nameStr)
  // 创建iframe 三
  // var elemIF = document.createElement('iframe')
  // elemIF.src = this.queryData.FileDtoList[index].FileURL
  // elemIF.style.display = 'none'
  // document.body.appendChild(elemIF)
  // 文件流直接访问文件地址 四
  // window.open(
    // 'http://192.168.1.100:8006/' + this.queryData.FileDtoList[index].FileURL
    // this.queryData.FileDtoList[index].FileURL
  // );
  // 文件流blob 五
  // let fileUrl = this.queryData.FileDtoList[index].FileURL
  // let url = window.URL.createObjectURL(new Blob([fileUrl]));
  // let link = document.createElement('a');
  // link.style.display = 'none';
  // 直接打开图片
  // link.href = 'http://192.168.1.100:8006/' + this.queryData.FileDtoList[index].FileURL;
  // 下载在浏览器底部报：失败，未发现文件
  // link.href = url
  // let arr = fileUrl.replace('"','').replace(/[\\]/g,',').split(',')
  // let nameStr = arr[arr.length-1]
  // link.setAttribute('download', nameStr);
  // document.body.appendChild(link);
  // link.click();
},
不同源使用的方法
// 不同源下载图片
downloadIamge(imgsrc, name) {//下载图片地址和图片名
  var image = new Image();
  // 解决跨域 Canvas 污染问题
  image.setAttribute("crossOrigin", "anonymous");
  image.onload = function() {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    var context = canvas.getContext("2d");
    context.drawImage(image, 0, 0, image.width, image.height);
    var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
  
    var a = document.createElement("a"); // 生成一个a元素
    var event = new MouseEvent("click"); // 创建一个单击事件
    a.download = name; // 设置图片名称
    a.href = url; // 将生成的URL设置为a.href属性
    a.dispatchEvent(event); // 触发a的单击事件
  };
  image.src = imgsrc;
},
复制

后台返回的数据图示：

这是上传到后台的服务器的，返回的最后一个\后面是文件名，所以使用到了

newStr.replace('"','').replace(/[\\]/g,',').split(',')
复制

还有一个很重要的点儿就是加 ‘/’,表示当前目录

alink.href = '/' + this.queryData.FileDtoList[index].FileURL
复制

最后一个内容就是：必须同源，也就是打包放到线上才能下载！

其它方法都试过了，可能需求功能，数据结构不一致，所以会导致各种情况发生，有兴趣的同伴可以都尝试，挺好玩的。

下班了，哈哈哈。