formData文件上传与下载,文件大小转换
我的项目的文件是存放在阿里云oss里 所以我这边是直接就有url地址数据。第二部分: formData文件大小转换:KBBMBGB。然后把downClick 绑定到按钮上点击就可以批量下载了。第一部分:formData文件上传,包括上传基本信息。第一部分:formData文件上传,包括上传基本信息。在页面结构写入代码file表单文件上传。第二种:location.href。在需要批量下载功能的vu
·
第一部分:formData文件上传,包括上传基本信息
在页面结构写入代码file表单文件上传
1.@change是在file表单数据发生改变时调用
<input id="file" @change="FilesUpload" ref="fileRef" type="file" />
script逻辑
// 文件上传
FilesUpload() {
let param = new FormData();
let data = {
WJDX: this.$refs.fileRef.files[0].size, //文件大小 :单位B
WJMC: this.$refs.fileRef.files[0].name, //文件名
WJLX: this.$refs.fileRef.files[0].name.split('.')[1], //文件类型:pdf,docx
file: this.$refs.fileRef.files[0] //file表单数据
};
// 利用for循环将所有准备好的文件信息遍历到params中
for (const key in data) {
param.append([key], data[key]);
}
// getUpload:为附件上传的axiso;
getUpload(param).then((res) => {
console.log(res, '上传完成需要回显的数据');
this.displayFile.push(res); //回显文件数据
});
},
第二部分: formData文件大小转换:KB B MB GB
//文件大小转换 getFileSize (size) size:单位b
export const getFileSize = function (size) {
if (size < 0.1 * 1024) {
//小于0.1KB,则转化成B
size = size.toFixed(2) + 'B';
} else if (size < 0.1 * 1024 * 1024) {
// 小于0.1MB,则转化成KB
size = (size / 1024).toFixed(2) + 'KB';
} else if (size < 0.1 * 1024 * 1024 * 1024) {
// 小于0.1GB,则转化成MB
size = (size / (1024 * 1024)).toFixed(2) + 'MB';
} else {
// 其他转化成GB
size = (size / (1024 * 1024 * 1024)).toFixed(2) + 'GB';
}
// 转成字符串
let sizeStr = size + '',
// 获取小数点处的索引
index = sizeStr.indexOf('.'),
// 获取小数点后两位的值
dou = sizeStr.substr(index + 1, 2);
// 判断后两位是否为00,如果是则删除00
if (dou == '00')
return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2);
return size;
};
第三部分:formData文件下载
单文件下载
第一种:a标签下载
//
代码如下 (示例):
解释: target="view_window"这个属性,浏览器将打开一个新的窗口,给这个窗口一个指定的标记“view_window”,然后将新的文档载入那个窗口。从此以后,超链接文档就可以指向这个新的窗口
//
指定网络地址下载
<a href="http://image.biaobaiju.com/uploads/20180919/21/1537362482-hQnIaqicdt.jpeg" download="http://image.biaobaiju.com/uploads/20180919/21/1537362482-hQnIaqicdt.jpeg" target="view_window">下载图片</a>
第二种:location.href
window.location.href = `文件地址`;
多文件下载
首先需要用到两个插件file-saver 和 jszip
在需要批量下载功能的vue文件中引入
import { saveAs } from 'file-saver'
import JSZip from 'jszip'
我的项目的文件是存放在阿里云oss里 所以我这边是直接就有url地址数据
先声明获取文件的函数
download(href) {
return new Promise((resolve, reject) => {
this.$axios({
method:'get',
url: href,
responseType: 'arraybuffer'
}).then(data => {
resolve(data.data)
}).catch(error => {
reject(error.toString())
})
})
}
然后声明下载按钮所绑定的函数
downClick(){
const zip = new JSZip()
const cache = {}
const promises = []
//companyAttachmentsList是我自己的附件url地址数组 你可以改成你的数组
companyAttachmentsList.forEach(item => {
//item.downloadLink.split('?')[0] 处理companyAttachmentsList里的url地址 去除?号和后面的字符串
const promise = this.download(item.downloadLink.split('?')[0]).then(data => { // 下载文件, 并存成ArrayBuffer对象
//item.fileName companyAttachmentsList里的文件名
zip.file(item.fileName, data, { binary: true }) // 逐个添加文件
cache[item.fileName] = data //可要可不要 用来打印查检查添加了那些文件
})
promises.push(promise) //加到promises队列里
})
Promise.all(promises).then(() => { //异步队列全部完成时 执行下面代码
zip.generateAsync({type:"blob"}).then(content => { // 生成二进制流
saveAs(content, "打包下载.zip") // 利用file-saver保存文件
})
})
}
然后把downClick 绑定到按钮上点击就可以批量下载了
注意:打包好的zip文件中,会自动去重 zip.file()传入的文件名参数如果相同,不会重复添加。例如如果有10个文件,其中3个重名, 那么zip文件里只有7个文件 ,不会重复打包如果想全部下载,建议文件名传入时加个index下标尾缀 例:原文件名 + '_' + index
更多推荐
已为社区贡献3条内容
所有评论(0)