使用 formidable 和 vue js 上传多个文件

Question

大家好，我正在尝试制作一个需要上传多个文件的应用程序但是在我的节点后端，当我尝试使用邮递员上传文件时它工作但是在与 vue js 一起使用时它不起作用

这是我的节点后端，我在其中使用 formidable 并尝试上传图像

app.post('/multiple', (req, res) => {
  var form = new formidable.IncomingForm(),
    files = [],
    fields = [];
  form.on('field', function (field, value) {
    console.log('fields is', field);
    fields.push([field, value]);
  });

  form.on('file', function (field, file) {
    console.log('i came inside file');
    console.log(file.name);
    const oldPath = file.path;
    const newPath = path.join(__dirname, 'uploads/' + file.name);
    const rawData = fs.readFileSync(oldPath);
    console.log('old path', oldPath);
    fs.writeFileSync(newPath, rawData);
    console.log('file uploaded');
    console.log(JSON.stringify(field));
    files.push([field, file]);
  });
  form.on('end', function () {
    console.log('done');
  });
  form.parse(req);
  console.log(files);
  return res.json(files);
});

这是我的 vue js 前端组件代码

这是 html vue js 的代码

<template>
  <div>
    <button @click="items++">Add One More File</button>
    <form @submit.prevent="handleImageUpload">
      <div v-for="item in items" :key="item">
        <input type="file" @change="handleFile($event, item)" />
      </div>
      <input type="submit" />
    </form>
  </div>
</template>

这是组件的脚本标签

<script>
import axios from 'axios';
export default {
  data() {
    return {
      items: 1,
      files: [],
    };
  },
  methods: {
    async handleImageUpload() {
      try {
        const fd = new FormData();
        this.files.map((index, file) => {
          fd.append(index, file);
        });
        const { data } = await axios.post('http://localhost:5000/multiple', fd);
        console.log('data from backend is ', data);
      } catch (error) {
        console.log(error);
      }
    },
    handleFile(e, item) {
      console.log(e);
      this.files[item - 1] = e.target.files[0];
    },
  },
};
</script>

现在当我用表单数据请求后端时发生了什么，那里一切都未定义

Answer 1

好的，那是我的错，我写地图函数的方式不对应该是

this.files.map((file,index) => {

使用 formidable 和 vue js 上传多个文件

Upload multiple files using formidable and vue js

javascript

node.js

vue.js

formidable