通过从前端将文件发送到我的 Node.js 服务器来获取未定义

Question

我想将图像文件发送到我的后端节点 js 服务器。我和穆尔特一起工作。我将数据作为 FormData 发送，但结果总是未定义。我对我的菜鸟代码感到抱歉:)。我是初学者。

这是我的 NODE.JS 服务器：

const express = require('express');
const cors = require('cors');
const multer = require('multer');
const app = express();
const upload = multer();

app.use(cors());
app.use(express.json());

// const storage = multer.diskStorage({
//     destination: function(req, file, cb){
//         return cb(null, './Images');
//     },
//     filename: function(req, file, cb){
//         return cb(null, `${file.originalname}`);
//     }
// })

// const upload = multer({storage});

app.post('/newTweet',upload.single('file'),(request, response) => {
    console.log(request.files);
    console.log(request.body.file);
    response.json();
})

app.listen(8000, () => console.log("Listen to PORT 8000"))

我在这里加载图片

const {setImageLoad} = useContext(contextForm);

    const handleImage = (event: ChangeEvent<HTMLInputElement>) => {
      const file = new FormData();
      file.append('file', event.target.files!![0]);
      setImageLoad(file);
    }

  return (
    <div className='buttonIcon'>
        <label htmlFor="imageUpload"><BsFillImageFill/></label>
        <input id="imageUpload" type="file" name='uploadImageFile' onChange={handleImage} hidden/>
    </div>

我曾与 axios 合作过

const headers = {
    'content-type': 'multipart/form-data'
}
axios.post('http://localhost:8000/newTweet', data,{headers});

数据来自这里

const [imageLoad, setImageLoad] = useState<FormData | undefined>()
const [newPost, setNewPost] = useState<{
    // profile: {username: string},
    // sentTo: string,
    // tweetContent:string,
    file: FormData | undefined
  } | null>(null);

const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    
    const { tweetInput, selectSentTo } = event.currentTarget;
    const newPost = {
      // profile: { username: '' },
      // sentTo: selectSentTo.value,
      // tweetContent: tweetInput.value,
      file: imageLoad
    }

    setNewPost(newPost);
  }
  
  useEffect(() => {
    if(newPost !== null){
      apiPost(newPost);
    }
  },[newPost])

当我发送数据时，我从服务器得到结果

undefined

对于

console.log(request.files)

Answer 1

imageLoad

的状态已经是

FormData

了，所以你只需要这样传递就好了

apiPost(imageLoad)

。

我建议在

handleSubmit

方法中调用API请求。

const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
  event.preventDefault()

  apiPost(imageLoad); // because imageLoad's type is FormData
}

其他建议

创建一个

input

状态，其中包含正常的

object

，而不是立即使用

FormData

。

const [input, setInput] = useState({
  file: null as File | null,
  // username: '', ...and other inputs
});

要处理文件选择，请执行以下操作：

const handleImage = (event: ChangeEvent<HTMLInputElement>) => {
  setInput((oldState) => {
    return {
      ...oldState,
      file: event.target.files!![0] || null,
    };
  }); 
}

然后你可以在

FormData

方法中构造

handleSubmit

const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
  event.preventDefault()

  const data = new FormData();
  data.append('file', input.file);
  // data.append('username', input.username); ...and other inputs

  apiPost(data);
}