Vue + Axios + Express 图片上传并利用 JS-XLSX 插件导出图片链接到 Excel

2024-01-11 20:10:37

引言

在现代网络应用中，图片上传是一个常见的功能。例如，在社交媒体应用中，用户可以上传头像、分享照片或视频；在电子商务应用中，用户可以上传产品图片；在内容管理系统中，用户可以上传文章配图等等。

为了实现图片上传功能，我们可以使用各种技术和工具。在本文中，我们将使用 Vue.js、Axios 和 Express.js 来构建一个简单的图片上传应用。我们还将使用 JS-XLSX 插件将上传的图片链接导出到 Excel 文件中。

项目搭建

首先，我们需要创建一个新的 Vue.js 项目。我们可以使用 Vue CLI 来快速创建一个项目。

vue create vue-image-upload

接下来，我们需要安装 Axios 和 Express.js。

npm install axios express

然后，我们需要创建一个新的 Express.js 应用。

mkdir server
cd server
npm init -y
npm install express

在 server 目录下，创建一个 index.js 文件，并写入以下代码：

const express = require('express');
const app = express();

app.use(express.static('public'));

app.post('/upload', (req, res) => {
  // 处理图片上传请求
});

app.listen(3000);

在 public 目录下，创建一个 index.html 文件，并写入以下代码：

<!DOCTYPE html>
<html>
  <head>
    
    <script src="https://unpkg.com/vue@3"></script>
    <script src="https://unpkg.com/axios@1"></script>
  </head>
  <body>
    <div id="app">
      <h1>Vue Image Upload</h1>
      <input type="file" id="image-input" @change="handleImageUpload">
      <button type="button" @click="exportImagesToExcel">Export Images to Excel</button>
    </div>

    <script>
      const app = Vue.createApp({
        data() {
          return {
            images: []
          }
        },
        methods: {
          handleImageUpload(event) {
            const files = event.target.files;
            for (let i = 0; i < files.length; i++) {
              const file = files[i];

              // 创建一个 FormData 对象
              const formData = new FormData();

              // 将文件添加到 FormData 对象中
              formData.append('image', file);

              // 发送 POST 请求上传图片
              axios.post('/upload', formData)
                .then((response) => {
                  // 将上传的图片链接添加到 images 数组中
                  this.images.push(response.data.url);
                })
                .catch((error) => {
                  console.error(error);
                });
            }
          },
          exportImagesToExcel() {
            // 使用 JS-XLSX 插件将 images 数组中的图片链接导出到 Excel 文件中
            const wb = XLSX.utils.book_new();
            const ws = XLSX.utils.json_to_sheet(this.images);
            XLSX.utils.book_append_sheet(wb, ws, 'Images');
            XLSX.writeFile(wb, 'images.xlsx');
          }
        }
      });

      app.mount('#app');
    </script>
  </body>
</html>