javascript - 将图像上传到数据库（React、Express、MongoDB）

Question

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

如果我从数据库中删除 fileList 行，产品属性的其余部分可以在本地主机中看到。

但是，如果我将 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}
    }

这是我的后端代码

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})
        })              
    })
})

这是我相关的前端代码

        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>

这是我的包版本

"express": "^4.17.1",
"react": "^16.9.0",

标签： javascriptnode.jsreactjsmongodbexpress