Question

我正在尝试选择图像并将其发送到服务器，但是当我发送它时，它表示字段文件为空。如果我不使用FormData，则会发生相同的问题。 Screen Shot。

我的代码：

import axios from "axios";
import React, { Component } from "react";
export default class UploadImage extends Component {
    handleChange= async (event)=>{
        const img = event.target.files[0]
        console.log(img)
        const fd = new FormData();
        fd.append('image',img, img.name)
        console.log(fd)
        const res = await axios.post(`http://localhost:5000/upload`,{file:img})
        // console.log(res)
    }
  render() {
    return (
      <div>
        <div class="custom-file mb-3">
            <input id="img" type="file" name="file"  class="custom-file-input" onChange={this.handleChange}/>
            <label for="file" class="custom-file-label">Choose File</label>
          </div>
       </div>
    );
  }
}

Answer 1

问题出在两个部分：

1）fd.append('image',img, img.name)的第一个字段必须等于后端upload.single('file')中的字段，因为"image"和"file"不匹配，因此会造成问题。

2）在axios请求await axios.post("http://localhost:5000/upload",{file:img}) 第二个字段只能是formdate变量，因此应该为await axios.post("http://localhost:5000/upload",fd)

我正在尝试上传图片，但似乎无法将其发送到服务器

1 个答案: