Question

我正在制作图片上传器，BE方面工作正常，我在postman中测试了路线，并按预期的方式上传了img。

路线本身

app.post('/upload/:id',(req,res) => {
upload(req, res, (err) => {
    if (err) {
        console.log('--------err', err);
    } else {
        if (req.file === undefined) {
            res.json({
                msg:"Error:No file selected"
            })
        } else {
            console.log('--------req.file', req.file);
            Users.update({
                avatar : req.body.avatar
            },
                {where : {
                    id  : req.params.id
                    }})
            res.json({
                msg : "File uploaded",
                file : `uploads/${req.file.filename}`
            })
        }
    }
})
})
//Uploads

这是必须保存图片的地方（本地文件夹）

 const storage = multer.diskStorage({
        destination : './uploads',
        filename : (req, file, cb) => {
            cb(null,file.fieldname + "-" + Date.now() + ".jpeg" +
            path.extname(file.originalname));
        }
    })

// Init upload

const upload = multer({
    storage : storage,
    fileFilter : (req,file,cb) => {
        checkFileType(file,cb)
    }
}).single('avatar')

// Check file type

此功能检查文件类型

 const checkFileType = (file,cb) => {
        // Allowed extensions
        const fileTypes = /jpeg|jpg|png|gif/;
        //Check extensions
        const extname = fileTypes.test( path.extname(file.originalname).toLowerCase())
        //Check mimeType
        const mimetype = fileTypes.test(file.mimetype)
    
        if(mimetype && extname) {
            return cb(null,true);
        } else {
            return cb("Error: Images Only")
        }
    
    }

正如我在postman一开始所说的那样，这条路线非常完美，但是前端是主要问题。

这是我从ReactJS组件发送请求的方式

    const fileselectedHandler = (event: any): void => {
    newImg(URL.createObjectURL(event.target.files[0]))
  }

  const fileuploadHandler = () : void => {
    const data = new FormData()
    data.append('avatar', img)
    axios.post(`http://localhost:4000/upload/${match.params.userId}`,{
      avatar : data
    })
      .then(res => {
        console.log(res)
      })
      .catch(err =>
        console.log('--------err', err)
      )
  }

<input name='avatar' onChange={fileselectedHandler} type={'file'}/> <button onClick={fileuploadHandler}>Upload Picture</button>

问题是每当我按下Upload picture按钮时，请求就被发送了，但是响应是这样的data: {msg: "Error:No file selected"}，而正在发送的正文中是这个data: "{"avatar":{}}"。有什么建议为什么会发生以及如何解决？

Answer 1

看来您不是从前端（{{1} 标头应为Content-Type，请参见npm page of multer上的第一条说明）

在this answer中，查看利用FormData web API的代码中的multipart/form-data函数（警告：可能会遇到Internet Explorer的兼容性问题）。

看看是否有帮助。

无法将前端请求中的正文从前端发送到后端ReactJS

1 个答案: