使用强大的和 vue js 上传多个文件

Question

嘿伙计们，我正在尝试制作一个需要上传多个文件的应用程序，但是在我的节点后端中，当我尝试使用 postman 上传文件时它可以工作，但是在使用 vue js 时它不起作用

这是我使用强大的节点后端并尝试上传图像

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 前端组件代码

这是 vue js 的 html 代码

<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

好的，这是我的错误，我写的是 map function 应该是错误的方式

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