vue+axios+express圖片上傳並利用js-xlxs外掛將圖片連結匯出到excel裡

xiaowang20154發表於2018-07-31
VueiOSExpressJSExcel

 一、介紹

vue + express實現圖片上傳，使用createObjectURL方法在前端頁面顯示圖片縮圖，使用ClipboardJS實現複製剪下功能，最後利用js-xlxs外掛將上傳後的伺服器端圖片資源url地址匯出到excel裡面。本專案只是演示用，如果你是元件式開發，直接安裝匯入相關外掛即可，其他方法都一樣，最後實現效果圖如下

vue+axios+express圖片上傳並利用js-xlxs外掛將圖片連結匯出到excel裡


二、關鍵功能實現

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");}複製程式碼

三、執行專案

到這裡就實現了最開始的功能，如果需要全部程式碼可以在我的github上下載
本文詳細程式碼可以在github上下載，地址https://github.com/wangfengyuan/ExportExcel
npm install
node app
瀏覽器輸入： localhost複製程式碼

四、寫在最後

前端剛入門沒多久，最近在公司實習，剛寫文章不久，所以可能寫的不太好，大家對文章和程式碼有什麼建議或者有更好的想法歡迎提出來一起交流，謝謝！個人部落格地址：https://wfy.netlify.com/


相關文章