VueJS/ nuxtjs :如何上传图片文件并保存到nuxtjs工程的静态文件夹？

npm install vue-upload-component --save

import VueUploadComponent from 'vue-upload-component';

export default {
  components: {
    'file-upload': VueUploadComponent
  },
  // ...
}

<template>
  <div>
    <file-upload
      ref="fileUpload"
      name="image"
      action="/api/upload"
      @complete="handleUploadComplete"
    ></file-upload>
    <button @click="uploadImage">上传图片</button>
  </div>
</template>

export default {
  // ...
  methods: {
    uploadImage() {
      this.$refs.fileUpload.submit();
    },
    handleUploadComplete(response) {
      // 处理文件上传完成后的逻辑
      if (response && response.data && response.data.filePath) {
        // 获取上传后的文件路径
        const filePath = response.data.filePath;
        // 在静态文件夹中保存文件
        this.saveFileToStaticFolder(filePath);
      }
    },
    saveFileToStaticFolder(filePath) {
      // 发送请求将文件移动到静态文件夹
      // 例如使用axios发送POST请求
      axios.post('/api/move-file', { filePath })
        .then(response => {
          // 处理移动文件的响应
          console.log('文件保存成功');
        })
        .catch(error => {
          // 处理移动文件的错误
          console.error('文件保存失败', error);
        });
    }
  }
}

// 例如在api/upload.js文件中
const fs = require('fs');
const path = require('path');

export default function (req, res) {
  // 获取上传的文件
  const file = req.files.image;
  // 生成保存文件的路径
  const filePath = path.join(__dirname, '../static/images', file.name);

  // 将文件移动到静态文件夹
  fs.rename(file.path, filePath, (error) => {
    if (error) {
      // 处理移动文件的错误
      console.error('文件保存失败', error);
      res.status(500).json({ error: '文件保存失败' });
    } else {
      // 文件保存成功
      res.json({ filePath });
    }
  });
}