Javascript 将图像上载到数据库（React、Express、MongoDB）

我正在尝试从前端（React）网站上传一组图像到后端（Express、Mongoose）localhost。但是，数据似乎已发送，但服务器未收到

如果从数据库中删除fileList行，则可以在localhost中看到产品属性的其余部分。

但是，如果将fileList行添加到数据库类型中，则在localhost中看不到任何数据。

数据似乎已发送，但服务器未收到。因此，我认为我的数据库类型定义或后端代码有问题。有人能帮我吗？非常感谢你

这是我的数据库类型

product:{
        'productName':{type:String, 'require':true},
        'productCategory':{type:[String], 'require':true},
        'productSubcategory':{type:String, 'require':true},
        'productTag':{type:[String], 'require':true},
        'productPrice':{type:String, 'require':true},
        'productDescription':{type:String, 'require':true},
        'fileList':{type:[Buffer], 'require':true}
    }

        this.state = {
            tagData :[],
            categoryDate:[],
            productName:'',
            productCategory:'',
            productSubcategory:'',
            productTag:'',
            productPrice:'',
            productDescription:'',
            previewVisible: false,
            previewImage: '',
            fileList: [],
            uploading: false,
        }

    handleChange = ({ fileList }) => this.setState({ fileList });

    handleSubmit = e => {
      e.preventDefault();
      this.props.form.validateFields((err, values) => {
        if (!err) {
          this.setState({            

            productName:values.ProductName,
            productCategory:values.ProductCategory,
            productSubcategory:values.ProductSubcategory,
            productTag:values.ProductTag,
            productPrice:values.ProductPrice,
            productDescription:values.ProductDescription,

          },function(){
            this.props.addProduct(this.state)
            console.log('Received values of form: ', this.state);
          })
        }
      })
    };

    //save the image into the file list
    <Upload                                     
      listType="picture-card"
      fileList={fileList}
      onPreview={this.handlePreview}
      onChange={this.handleChange}
      {...props}
      >
      {fileList.length >= 8 ? null : uploadButton}
    </Upload>

    //Submit button
    <Button type="primary" 
        onClick={this.handleSubmit}
        loading={uploading}>
        Confirm
    </Button>

这是我的后端代码

Router.post('/addProduct', function(req, res){  
    const {type} = req.body 
    const {productName} = req.body
    const body = req.body
    Product.findOne({productName},function(err,doc){

        const productModel = new Product(req.body)
        productModel.save(function(e,d){
            if (e) {
                return res.json({code:1, msg:'Something goes wrong'})
            }       
            return res.json({code:0, data:req.body})
        })              
    })
})

这是我的相关前端代码

product:{
        'productName':{type:String, 'require':true},
        'productCategory':{type:[String], 'require':true},
        'productSubcategory':{type:String, 'require':true},
        'productTag':{type:[String], 'require':true},
        'productPrice':{type:String, 'require':true},
        'productDescription':{type:String, 'require':true},
        'fileList':{type:[Buffer], 'require':true}
    }

        this.state = {
            tagData :[],
            categoryDate:[],
            productName:'',
            productCategory:'',
            productSubcategory:'',
            productTag:'',
            productPrice:'',
            productDescription:'',
            previewVisible: false,
            previewImage: '',
            fileList: [],
            uploading: false,
        }

    handleChange = ({ fileList }) => this.setState({ fileList });

    handleSubmit = e => {
      e.preventDefault();
      this.props.form.validateFields((err, values) => {
        if (!err) {
          this.setState({            

            productName:values.ProductName,
            productCategory:values.ProductCategory,
            productSubcategory:values.ProductSubcategory,
            productTag:values.ProductTag,
            productPrice:values.ProductPrice,
            productDescription:values.ProductDescription,

          },function(){
            this.props.addProduct(this.state)
            console.log('Received values of form: ', this.state);
          })
        }
      })
    };

    //save the image into the file list
    <Upload                                     
      listType="picture-card"
      fileList={fileList}
      onPreview={this.handlePreview}
      onChange={this.handleChange}
      {...props}
      >
      {fileList.length >= 8 ? null : uploadButton}
    </Upload>

    //Submit button
    <Button type="primary" 
        onClick={this.handleSubmit}
        loading={uploading}>
        Confirm
    </Button>

---

您如何在前端发送文件？您能提供一个关于如何执行请求的片段吗？看看multer：它是一个中间件，支持express服务器中的多部分表单请求。请注意，您的前端请求需要是多部分/表单数据请求。请注意这个类似的问题：您如何在前端发送文件？您能提供一个关于如何执行请求的片段吗？看看multer：它是一个中间件，支持express服务器中的多部分表单请求。请注意，前端请求需要是多部分/表单数据请求。请注意这个类似的问题