vue下载ftp文件的两种情况(都是干货)
vue下载ftp文件1、如果vue项目和ftp地址未跨域新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入1、如果
·
首先查看自己的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属性了,我们可以走曲线救国的道路:
- 首先在项目中下载axios包
// 引入axios包 npm i axios -S
- 然后在main.js页面中引入
// 下载axios包 import axios from 'axios' //省略n行与此无关的代码 Vue.prototype.$axios = axios axios.defaults.baseURL = '/ftp' //最主要就是这一句
-
接着在vue.config.js中配置代理
// 配置axios代理 module.exports = { //省略无关主题的n行配置 devServer: { proxy: { '/ftp': { target: 'http://xx.xxx.xxx.xx/ftp', //ftp服务器的地址 changeOrigin: true, pathRewrite: { '^/ftp': '' } } }, } }
-
最后就是在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) }) }
更多推荐
已为社区贡献1条内容
所有评论(0)