vue生成并上传两个zip文件

✍️ 作者简介: 一个每天中午去打篮球和锻炼的前端开发。

🐈‍⬛ 两只猫🐱和一只狗的铲屎官🐶

🧣 微博: GuoJ阝阝（fu）

---

前言

记录一次上传两个zip文件给后端的过程

最近业务上有个需求，需要我上传两个文件，一个xml文件和一个txt文件。并且这两个文件还比较大，有2mb左右，做起来很头疼，这里记录一下我踩坑流程。

---

提示：以下是本篇文章正文内容，下面案例可供参考

二、使用步骤

1.引入库

代码如下（示例）：

// 引入JSZip用来压缩文件，优化txt文件太大的问题
import JSZip from 'jszip'
// 引入x2js用来把JSON数据转换为xml数据
import x2js from 'x2js'

二、整理数据

要生成文件，首先需要整理数据。
要生成txt文件很简单，字符串不需要过多处理。
要生成xml文件则需要转换一下JSON数据，利用x2js把JSON转换成xml类型。
最后利用JSZip把数据转换成文件，并压缩成zip包。
定义FormData把文件存入，最后把FormData传给后端。

// 生成.txt的文件，转换成zip文件传给后端
var allStr = "myString"
// 新建JSZip对象
var zipMesh = new JSZip();
// 创建txt文件，把字符串存入
zipMesh.file("mesh.txt", allStr)
// 直接利用数据生成zip文件传送给后端
let meshResult = await zipMesh.generateAsync({
   type: "blob",
   compression: "DEFLATE",
   compressionOptions: {
     level: 9,
   },
 })
 .then(content => {
	 const zipFile = new File([content], 'mesh.txt', { type: "application/zip", });
     return zipFile;
 });

// 生成xml文件，转换成zip文件传给后端
var zipBOM = new JSZip();
// 创建txt文件，把字符串存入
const x2js = new x2js()
// 利用x2js把JSON数据转为xml数据
zipBOM.file("GlobalBOM.xml", x2js.js2xml(this.xmlJson))
// 直接利用数据生成zip文件传送给后端
let BOMResult = await zipBOM.generateAsync({
    type: "blob",
    compression: "DEFLATE",
    compressionOptions: {
      level: 9,
    },
  })
  .then(content => {
  		const zipFile = new File([content], 'GlobalBOM.xml', { type: "application/zip", });
    	return zipFile
  });

二、调用接口，传递数据

首先把生成的文件存入FormData中，当作参数传给后端。

let params = new FormData()
   params.append('bom', BOMResult)
   params.append('mesh', meshResult)
   uploadBOMandMesh(params).then((res) => {
     if (res && res.code === 0) {
       
     }
   })
   .catch((error) => {
   });

注意：axios要加一个header，代表传输多个文件。

export const uploadBOMandMesh = (params) => {
  return axios({
    url: '.......',
    method: 'post',
    headers: {
      'Content-Type':'multipart/form-data'
    },
    data: params
  });
}

---

总结

以上就是今天要讲的内容