为什么 fromdata 传递给 req.body 如果是文件，但当它是 blob 时传递给 req.files 使用 react/express-fileupload

问题描述

我发现 5 天前使用 react 和 express-fileupload 上传我的文件有很多问题： 我的 req.files 总是 null 而文件传递给 req.body : body: {file:'[object File]'} 所以我尝试了很多在谷歌中找到的解决方案，但遗憾的是没有任何效果 我试图创建并传递一个 blob，它的工作 blob 传递到 req.files。 PS：当我使用 RESTer 测试我的 URL 时，它正在处理上传的文件。

如果是的话，我应该将我的文件转换为 blob 吗？？

我的前端是这样的：

import React,{ Fragment,useState } from 'react';
import axios from 'axios';

const FileUpload = () => {
  var [file,setFile] = useState('');
  const [filename,setFilename] = useState('Choose File');

  const onChange = e => {
      console.log(e.target.files[0].name)
    setFile([e.target.files[0]]);
    setFilename(e.target.files[0].name);
    console.log(file)
  };
 
  const onSubmit = async e => {
    e.preventDefault();
    const formData = new FormData();
    
    formData.append('file',file);
   console.log("i m here on submit");
    try {
        const res = await axios.post('http://localhost:5001/up',formData,{
        headers: {
          'Content-Type': 'multipart/form-data'
        },onUploadProgress: progressEvent => {
          setUploadPercentage(
            parseInt(
              Math.round((progressEvent.loaded * 100) / progressEvent.total)
            )
          );
        }
        
      });
      console.log("file read");
      
    } catch (err) {
     console.log(err)
      setUploadPercentage(0)
    }
  };

  return (
    
      <form onSubmit={onSubmit}>
        <div className='custom-file mb-4'>
          <input
            type='file'
            className='custom-file-input'
            id='customFile'
            onChange={onChange}
          />
          <label className='custom-file-label' htmlFor='customFile'>
            {filename}
          </label>
        </div>
        here: {filename}
      

        <input
          type='submit'
          value='Upload'
          className='btn btn-primary btn-block mt-4'
        />
      </form>
    
  );
};

export default FileUpload;

和后端：

import express from "express"
import React from "react"
import cors from "cors"
import nez_topographie from "./api/controllers/nez_topographie.route.js"
import fileUpload from "express-fileupload"
import multer from "multer"
import bodyParser from "body-parser"
import morgan from "morgan"

const app = express()
app.use(fileUpload())
app.use(cors())
app.use(express.json())




app.use("/nez_topographie",nez_topographie)


app.post('/up',async (req,res) => {
   try {
       console.log(req)
       
       console.log(req.files.file.name)
     



       if(!req.files) {
           console.log("no")
           res.send({
               status: false,message: 'No file uploaded'
           });
       } else {
           //Use the name of the input field (i.e. "avatar") to retrieve the uploaded file
           let avatar = req.files.file;
           
           //Use the mv() method to place the file in upload directory (i.e. "uploads")
           avatar.mv('./' + avatar.name);

           //send response
           res.send({
               status: true,message: 'File is uploaded',data: {
                   name: avatar.name,mimetype: avatar.mimetype,size: avatar.size
               }
           });
       }
   } catch (err) {
       console.log(err)
       res.status(500).send(err);
   }
});

export default app

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）