記錄一下之前項目用到的導(dǎo)入文件夾和導(dǎo)入文件出現(xiàn)的一些注意的點，直接上代碼

注意：在傳相同的文件時，會發(fā)現(xiàn)無法觸發(fā)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();

// 文件夾導(dǎo)入
const selectFile = () => {
    let project = store.state.project;     //給后端傳的，可有可無
    var files = planFileRef.value.files;
    var data = new FormData();
    // 創(chuàng)建一個表單數(shù)據(jù)
    //文件夾導(dǎo)入按照 特定開頭和結(jié)尾導(dǎo)入
    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);
};

// 文件導(dǎo)入
const selectWord = () => {
    let project = store.state.project;    //給后端傳的，可有可無
    var files = planWordRef.value.files;

    const formData = new FormData();
    // 創(chuàng)建一個表單數(shù)據(jù)
    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>

?前端導(dǎo)出zip壓縮包

我就用了最原始的方法axios 導(dǎo)出zip? ?因為之前也沒有這樣的需求

遇到過一個小問題就是，我的項目在config.js中判斷了是不是開發(fā)環(huán)境還是生產(chǎn)環(huán)境，但我實際中

開發(fā)測試是沒有問題的，打包給后端生產(chǎn)環(huán)境下，就會導(dǎo)出zip有問題，這時候查看是config,js還是開發(fā)環(huán)境下的api? 所以我在里面就多加了一個一模一樣的判斷，這也是最笨的方法

import axios from "axios";

//導(dǎo)出工程
const exportProj = () => {
    let project = store.state.project;  

    //判斷生產(chǎn)環(huán)境和開發(fā)環(huán)境

    let urlApi = "";
    if (process.env.NODE_ENV == "development") {
        //開發(fā)環(huán)境
        urlApi = baseUrl + `/project/export/${project.id}`;
    } else if (process.env.NODE_ENV == "production") {
        //生產(chǎn)環(huán)境
        urlApi = `/project/export/${project.id}`;
    }

    axios({
        // 用axios發(fā)送post請求
        method: "get",
        url: urlApi, // 請求地址
        data: {
            data: {},
        },
        responseType: "blob", // 表明返回服務(wù)器返回的數(shù)據(jù)類型
        headers: {
            "Content-Type": "application/json; application/octet-stream",
        },
    })
        .then((res) => {
            let blob = new Blob([res.data], { type: "application/zip" });
            // 設(shè)置下載的內(nèi)容以及格式，zip文件必須設(shè)置type: "application/zip"
            const url = window.URL.createObjectURL(blob); // 設(shè)置路徑
            const link = window.document.createElement("a"); // 創(chuàng)建a標(biāo)簽
            link.href = url;
            link.download = pdfData.title + `.zip`; // 設(shè)置文件名
            link.style.display = "none";
            link.click();
            URL.revokeObjectURL(url); // 釋放內(nèi)存
            loading.close();
            ElMessage({
                message: "導(dǎo)出成功",
                type: "success",
            });
        })
        .catch(function (error) {
            console.log(error);
            loading.close();
        });
};

導(dǎo)出dat格式（這個簡單無需多說）文章來源地址http://www.zghlxwxcb.cn/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);
};

到了這里，關(guān)于vue3導(dǎo)入文件夾、導(dǎo)入文件、導(dǎo)出zip、導(dǎo)出的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！