vue下载ftp文件的两种情况(都是干货)

首先查看自己的vue版本

1、如果vue项目和ftp地址未跨域

直接用a标签的download属性就可以了
以http://xx.xxx.xxx.xx/ftp/JPG/2020-06/2f85d61866e24adc9cdacad189321fbe/a2f551d676b549d0939d31371b33399f.JPG为例（注意这是带文件格式的ftp地址，这样做有很多的方便，可以省却前端的一些操作）

//href值为ftp地址，此处是http://xx.xxx.xxx.xx/ftp/JPG/2020-06/2f85d61866e24adc9cdacad189321fbe/a2f551d676b549d0939d31371b33399f.JPG
<a href="http://xx.xxx.xxx.xx/ftp/JPG/2020-06/2f85d61866e24adc9cdacad189321fbe/a2f551d676b549d0939d31371b33399f.JPG" download></a>

2、如果vue项目和ftp地址跨域

使用a标签的download属性的前提是vue项目和ftp地址未跨域，跨域的话就不能使用download属性了，我们可以走曲线救国的道路:

1. 首先在项目中下载axios包

   // 引入axios包
   npm i axios -S
   

2. 然后在main.js页面中引入

   // 下载axios包
   import axios from 'axios'
   //省略n行与此无关的代码
   Vue.prototype.$axios = axios
   axios.defaults.baseURL = '/ftp' //最主要就是这一句
   

3. 接着在vue.config.js中配置代理

   // 配置axios代理
   module.exports = {
     //省略无关主题的n行配置
     devServer: {
       proxy: {
     	  '/ftp': {
       	target: 'http://xx.xxx.xxx.xx/ftp', //ftp服务器的地址
       	changeOrigin: true,
       	pathRewrite: {
         	  '^/ftp': ''
       	}
     	  }
   	},
     }
   }
   

   

4. 最后就是在HTML页面上添加点击事件了

   downLoadFTP(filePath, realName, fileName) {
     //filePath + realName是ftp除去target的部分（这里是'/JPG/2020-06/2f85d61866e24adc9cdacad189321fbe/a2f551d676b549d0939d31371b33399f.JPG'）
     this.$axios.get(filePath + realName, {
       responseType: 'blob'//必填
     })
       .then(res => {
         let url = window.URL.createObjectURL(new Blob([res.data])); 
         // 生成一个a标签
         let link = document.createElement("a");
         link.style.display = "none";
         link.href = url;
   	  //fileName是名称部分（这里指文件的现在名称---’13.jpg‘，和’a2f551d676b549d0939d31371b33399f.JPG‘是一个文件）
         link.download = fileName;   
         document.body.appendChild(link);
         link.click();
         window.URL.revokeObjectURL(link.href) //释放url
         document.body.removeChild(link)
       })
       .catch(e => {
         console.log('下载文件出错：', e)
       })
   }