使用 Multer 将 csv 文件上传到 Node.js 时出现意外字段

Posted 2023-02-22

【中文标题】使用 Multer 将 csv 文件上传到 Node.js 时出现意外字段

【英文标题】：Unexpected field occurs while uploading csv files to Node.js using Multer

【发布时间】：2019-01-30 06:05:00

【问题描述】：

我正在使用 Node.js、Vue 和 Multer 开发文件上传功能。

这里是用 Vue.js 编写的前端代码

export default 
	data()
		return
      selected: "How do you want to input the data?",
      options: [
           id: 1, name: 'Choose from file system' ,
           id: 2, name: 'Choose from an API' ,
           id: 3, name: 'Choose from a Database' 
      ],
      files: []
		
  ,

  methods: 
      submitFiles()
        
        let formData = new FormData();
        let url = axios.defaults.baseURL;

        for( var i = 0; i < this.files.length; i++ )
          let file = this.files[i];
          formData.append('files[' + i + ']', file);
        

        axios.post( `$url/select-files`,
          formData,
          
            headers: 
                'Content-Type': 'multipart/form-data'
            
          
        ).then(function(response)
          console.log('SUCCESS!!');
          console.log('The response object is '+response);
        )
        .catch(function()
          console.log('FAILURE!!');
        );
      ,

      handleFilesUpload()
        let uploadedFiles = this.$refs.files.files;

        for( var i = 0; i < uploadedFiles.length; i++ )
          this.files.push( uploadedFiles[i] );
        
        console.log(this.files);
      
  

<div id="app" class="ui equal width left aligned padded grid stackable">
  
    <div>

      <div v-if="selected === 1">
      
        <div class="large-12 medium-12 small-12 cell">
          <input type="file" id="files" ref="files" v-on:change="handleFilesUpload()"/>
          <div v-if="this.files.length > 0" class="ui small basic icon buttons">
            <button class="ui button" v-on:click="submitFiles()">
              <i class="upload icon">
              </i>Upload
            </button>
            
          </div>
        </div>

    
        <br>
      </div>

    </div>

	</div>

这是用 Node.js 编写的代码

// For cross origin resource sharing
app.use(function(req, res, next) 
    res.header('Access-Control-Allow-Origin', 'http://localhost:8080');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Set-Cookie, *');
    res.header('Access-Control-Allow-Credentials', 'true');
    next();
)

const multer = require('multer');
let upload = multer();
app.post('/select-files', upload.single('files'), async(req, res) => 
    try 
        console.log(req.file);
     catch (err) 
        res.sendStatus(400);
    
)

当我尝试使用 Postman 测试上述代码时，出现以下错误，

我需要访问从客户端发送的完整文件。我不知道我做错了什么。有人可以帮帮我吗？

【参考方案1】：

附加到formData 的名称必须与upload.single() 中的文件名相同。

所以你必须将formData.append('files[' + i + ']', file);替换为formData.append('files', file);才能上传单个文件。