vue3导入文件夹、导入文件、导出zip、导出

记录一下之前项目用到的导入文件夹和导入文件出现的一些注意的点，直接上代码

注意：在传相同的文件时，会发现无法触发change事件

javascript 复制代码

 nextTick(() => {
        planFileRef.value.value = "";
        planWordRef.value.value = "";
    });

javascript 复制代码

<template>

<p>上传文件夹</p>
                    <input
                        ref="planFileRef"
                        class="show0"
                        type="file"
                        webkitdirectory
                        @change="selectFile"
                    />
<p>上传文件</p>
                    <input
                        ref="planWordRef"
                        type="file"
                        class="show0"
                        multiple
                        @change="selectWord"
                    />
</template>

<script setup>

import { ref } from "vue";
let planFileRef = ref();
let planWordRef = ref();

// 文件夹导入
const selectFile = () => {
    let project = store.state.project;     //给后端传的，可有可无
    var files = planFileRef.value.files;
    var data = new FormData();
    // 创建一个表单数据
    //文件夹导入按照 特定开头和结尾导入
    let regexArr = [
        /^rascn.*dat$/,
        /^rlight.*dat$/,
        /^rpimp.*xml$/,
        /^rppka.*xml$/,
        /^rpppk.*xml$/,
        /^rptrk.*xml$/,
        /^rsbeo.*dat$/,
        /^rsps.*dat$/,
    ];

    for (let i = 0; i < files.length; i++) {
        regexArr.forEach((item) => {
            if (item.test(files[i].name)) {
                data.append("file", files[i]);
            }
        });
    }
    data.append("projId", project.id);
    importApi(data);
};

// 文件导入
const selectWord = () => {
    let project = store.state.project;    //给后端传的，可有可无
    var files = planWordRef.value.files;

    const formData = new FormData();
    // 创建一个表单数据
    for (let i = 0; i < files.length; i++) {
        let a = files[i];
        console.log(a);
        formData.append("file", a);
    }
    formData.append("projId", project.id);
    importApi(formData);
};

//请求
const importApi = (formData) => {
    $http
        .post("/project/file", formData, {
            headers: {
                "Referrer-Policy": "unsafe-url",
                "Content-Type": "multipart/form-data",
            },
        })
        .then((res) => {
            if (res.code == 1) {
         
        })
};

</script>

前端导出zip压缩包

我就用了最原始的方法axios 导出zip 因为之前也没有这样的需求

遇到过一个小问题就是，我的项目在config.js中判断了是不是开发环境还是生产环境，但我实际中

开发测试是没有问题的，打包给后端生产环境下，就会导出zip有问题，这时候查看是config,js还是开发环境下的api 所以我在里面就多加了一个一模一样的判断，这也是最笨的方法

javascript 复制代码

import axios from "axios";

//导出工程
const exportProj = () => {
    let project = store.state.project;  

    //判断生产环境和开发环境

    let urlApi = "";
    if (process.env.NODE_ENV == "development") {
        //开发环境
        urlApi = baseUrl + `/project/export/${project.id}`;
    } else if (process.env.NODE_ENV == "production") {
        //生产环境
        urlApi = `/project/export/${project.id}`;
    }

    axios({
        // 用axios发送post请求
        method: "get",
        url: urlApi, // 请求地址
        data: {
            data: {},
        },
        responseType: "blob", // 表明返回服务器返回的数据类型
        headers: {
            "Content-Type": "application/json; application/octet-stream",
        },
    })
        .then((res) => {
            let blob = new Blob([res.data], { type: "application/zip" });
            // 设置下载的内容以及格式，zip文件必须设置type: "application/zip"
            const url = window.URL.createObjectURL(blob); // 设置路径
            const link = window.document.createElement("a"); // 创建a标签
            link.href = url;
            link.download = pdfData.title + `.zip`; // 设置文件名
            link.style.display = "none";
            link.click();
            URL.revokeObjectURL(url); // 释放内存
            loading.close();
            ElMessage({
                message: "导出成功",
                type: "success",
            });
        })
        .catch(function (error) {
            console.log(error);
            loading.close();
        });
};

导出dat格式（这个简单无需多说）

javascript 复制代码

const downloadDat = () => {
    //data是文件流
    let project = store.state.project;
    let url =
        window.location.origin +
        baseUrl +
        `/event/download/dat/${project.id}?&title=${pdfData.title}&projId=${project.id}`;
    console.log(url);
    let fileName = pdfData.title + ".dat"; //文件名称
    const a = document.createElement("a");
    a.href = url;
    a.download = fileName;
    a.style.display = "none";
    document.body.appendChild(a);
    a.click();
    URL.revokeObjectURL(a.href);
    document.body.removeChild(a);
};