vue+axios+express圖片上傳並利用js-xlxs插件將圖片連接導出到excel裏

vue+axios+express圖片上傳並利用js-xlxs插件將圖片連接導出到excel裏

1、介紹

vue + express實現圖片上傳，使用createObjectURL方法在前端頁面顯示圖片縮略圖，使用ClipboardJS實現複製剪切功能，最後利用js-xlxs插件將上傳後的服務器端圖片資源url地址導出到excel裏面。本項目只是演示用，若是你是組件式開發，直接安裝導入相關插件便可，其餘方法都同樣，最後實現效果圖以下

2、關鍵功能實現

1. 圖片縮略圖生成

最開始我是將圖片上傳到node端後，後臺返回上傳後的圖片地址，而後前端顯示，可是查找資料後發現createObjectURL就能夠輕鬆實現圖片縮略圖，這在MDN官網上就有這些應用舉例，這個網站介紹了使用createObjectURL方法能夠展現圖片，視頻，PDF的縮略圖，及其方便。所以這裏採用該方法。另外input的mutiple屬性能夠實現多文件上傳。
相關代碼以下

html部分
<h1>文件上傳</h1>
<form action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="pic" multiple ref="pic">
    <input type="button" @click="uploadFile" value="上傳">
</form>

js部分
uploadFile() {
    //拿到上傳的圖片
    var imgs = this.$refs.pic.files;
    for (let i = 0; i < imgs.length; i++) {
        //逐個獲取圖片
        let file = imgs[i];
        //使用createObjectURL方法生成圖片縮略圖預覽
        let src = window.URL.createObjectURL(file);
        //上傳該圖片到服務器端並拿到返回的服務器端圖片地址
        let url = await uploadImg(file, this.$data.urlList);
        //構造數組
        this.$data.urlList.push({
            src: src,
            name: file.name,
            url: "localhost/" + url
        });
    }
}

2. 圖片上傳並存儲

先貼上這部分代碼

//上傳一個圖片文件
async function uploadImg(file, urlList) {
    var formData = new FormData();
    formData.append("pic", file);
    let url = await new Promise((resolve, reject) => {
            axios.post('/upload', formData, {
                    headers: {
                        "Content-Type": "multipart/form-data"
                    }
                })
                .then((res) => {
                    resolve(res.data);
                })
                .catch((err) => {
                    console.log(err);
                });
        })
        //返回服務器上對應地址
    return url;
}

上面裏面的uploadImg函數就是實現圖片上傳，圖片文件上傳使用FormData格式,利用axios發送post請求，在這裏使用ES6的async，結合上面的

let url = await uploadImg(file, this.$data.urlList);

這一句中的await，使得請求成功並完成後獲取到線上url地址。node端代碼以下：

app.post("/upload", function(req, res) {

    var form = new formidable.IncomingForm();

    form.parse(req, function(err, fields, files) {
        let imgPath = files.pic.path
        let imgName = files.pic.name
        // 同步讀取文件
        let data = fs.readFileSync(imgPath)
        // 存儲上傳的圖片，同時獲取靜態圖片地址並返回客戶端
        fs.writeFile("static/" + imgName, data, function(err) {
            if (err) {
                console.log(err)
                return;
            }
            let itemUrl = {
                "path": "static/" + imgName
            };
            let url = "static/" + imgName;
            res.send(url);
        })
    })

});

使用formidable解析圖片，並同步寫入圖片到static文件夾，最後獲取線上圖片地址返回

3. 前端顯示

<h1>圖片列表</h1>
<div class="img-wrapper">
    <div class="uploading" v-for="(item, index) in urlList" :key="index">
        <div>
            <img class="uploading-image" :src="item.src" alt="">
        </div>
        <div class="uploading-info">
            <span class="uploading-name">
                <a target="_blank" :href="item.src">{{ item.name }}</a>
            </span>
            <span class="copy" :data-clipboard-text="item.url">複製</span>
        </div>
    </div>
</div>

其中src屬性是生成的縮略圖URL，name是圖片名稱，url屬性是線上圖片地址。

4. 導出excel

導出excel目前有不少插件，最開始我是使用excel-export插件，官網地址在這裏,這個插件api很簡單也很方便，可是有點BUG，他說能設置單元格寬度，可是按照他的來我不能設置單元格寬度，以後又找到一個更強大的js-xlxs插件，這個插件很強大，基本上須要的excel相關的需求都能知足要求吧。具體導出excel代碼以下，注意生成表格的數據須要是二維數組。

downloadURL() {
    var imgURLS = [];
    //設置excel標題
    imgURLS.push(["序號", "圖片名稱", "URL連接"]);
    //獲取全部圖片url連接信息
    this.$data.urlList.forEach((item, index) => {
        //構建一個數組
        var itemArray = [index + 1].concat(item.name, item.url);
        //構建二維數組
        imgURLS.push(itemArray);
    });
    //生成工做表結構
    const ws = XLSX.utils.aoa_to_sheet(imgURLS);
    //設置三列單元格寬度
    var wscols = [{
        wch: 6
    }, {
        wch: 50
    }, {
        wch: 50
    }];
    ws['!cols'] = wscols;
    //生成excel基本數據結構
    const wb = XLSX.utils.book_new();
    //生成表名字爲SheetJS的excel工做區
    XLSX.utils.book_append_sheet(wb, ws, "SheetJS");
    //導出excel
    XLSX.writeFile(wb, "export.xlsx");
}

3、運行項目

到這裏就實現了最開始的功能，若是須要所有代碼能夠在個人github上下載

本文詳細代碼能夠在github上下載，地址 https://github.com/wangfengyu...
運行代碼

npm install
node app
瀏覽器輸入： localhost

4、寫在最後

我前端剛入門沒多久，最近在公司實習，剛寫文章不久，因此可能寫的不太好，你們對文章和代碼有什麼建議或者有更好的想法歡迎提出來一塊兒交流，謝謝！我的博客地址： https://wfy.netlify.com/