vue+express图片上传并利用js-xlxs插件将图片链接导出到excel

一、介绍

vue + express实现图片上传，使用createObjectURL方法在前端页面显示图片缩略图，使用ClipboardJS实现复制剪切功能，最后利用js-xlxs插件将上传后的服务器端图片资源url地址导出到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/