formData文件上传与下载，文件大小转换

第一部分：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

以上知识来源 Vue 中批量下载文件并打包的示例代码_vue.js_脚本之家 (jb51.net)