vue3导入文件夹、导入文件、导出zip、导出-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue3导入文件夹、导入文件、导出zip、导出。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

<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 所以我在里面就多加了一个一模一样的判断，这也是最笨的方法

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格式（这个简单无需多说）文章来源地址https://www.toymoban.com/news/detail-828302.html

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);
};

到了这里，关于vue3导入文件夹、导入文件、导出zip、导出的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！