Upload Images to Database(React, Express, MongoDB)

Question

i am trying to upload a bunch of images from the front-end (React) website into the back-end(Express, Mongoose) localhost. However, It seems the data is sent, but the server does not received it.

If i remove the fileList row from the database, the rest of the product attribute can be seen in the localhost.

However if i add the fileList row into the database type, i cannot see any data in the localhost.

It seems the data is sent, but the server does not received it. Therefore, i think there is something wrong with my database type definition or back-end code. Can anyone help me? Thank you so much!

Here is my Database type

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

Here is my back-end code

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

Here is my related front end code

        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>

Here is my package version

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