Javascript 在React Js+中处理多个上载图像；将其发送到服务器

今天我上传图片时遇到了一些问题。我试图从我的前端上传2张图片，但在后端出现错误，在发送后，

错误无法发送头。当我只上传一张图片时，我没有收到任何错误，但当我尝试上传两张图片时，我收到了错误。我需要做什么？我应该使用多部分/表单数据吗

我尝试使用多部分/表单数据，但没有成功

import {Link} from 'react-router-dom'

class Category extends React.Component{
    constructor(props){
        super(props);

        this.state={
            categoryId : this.props.match.params.id,
            dataCategory:[],
            categoryName:"",
            categoryDesc:"",
            categoryImage:"",
            categoryImageCabor:"",
            namaCabor :"",
            descCabor :"",
            imgCabor :"",
            imageCabor : "",
            selectedFile: null,
            imagePreviewUrl :"",
            file:""
        }
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.imageHandleChange = this.imageHandleChange.bind(this);
    }
    componentWillMount(){
        this.getDetailsData();
    }

    getDetailsData(i){
        let categoryId = this.state.categoryId;

        fetch(`http://localhost:4000/get/${categoryId}`).then(res =>{
            if(res.status === 200)
                return res.json().then(resCategoryId =>{
                    console.log(resCategoryId);
                    this.setState({
                        id : resCategoryId._id,
                        namaCabor : resCategoryId.namaCabor,
                        descCabor : resCategoryId.descCabor,
                        imgCabor : resCategoryId.imgCabor,
                        imageCabor : resCategoryId.imageCabor
                    });
                });
            }).catch(err =>{
                if(err) console.log(err);
            })
    }


    imageHandleChange(e){
        e.preventDefault();

        let reader = new FileReader();
        let file = e.target.files[0];

        reader.onloadend = () =>{
            this.setState({
                file : file,
                imagePreviewUrl : reader.result
            });
        }
        reader.readAsDataURL(file);
    }


    handleSubmit(e){
        e.preventDefault();
        let {imagePreviewUrl} = this.state;
        const dataCategory = this.state.dataCategory;
        let categoryName = this.refs.categoryName.value;
        let categoryImage = this.refs.categoryImage.value;
        let categoryDesc =  this.refs.categoryDesc.value,
            categoryImageCabor = (<img alt="www.google.com" height="100px" src={imagePreviewUrl} />),
            namaCabor = this.refs.namaCabor.value,
            descCabor = this.refs.descCabor.value,
            imageCabor = (<img height="100px" src={this.state.imageCabor.props.src} />)

            fetch('http://localhost:4000/add', {
                mode:'cors',
                method:'post',
                headers:{
                    'Content-Type' : 'application/json',
                    "Accept" : "application/json",
                    "type" : "formData"
                },
                body:JSON.stringify({
                    categoryName : categoryName,
                    categoryDesc : categoryDesc,
                    categoryImage: categoryImage,
                    categoryImageCabor : categoryImageCabor,
                    namaCabor : namaCabor,
                    descCabor : descCabor,
                    imageCabor : imageCabor,
                    status : true
                }),
            }).then(res=>{
                return res.json();
            }).catch(function(err){
                if(err){
                    console.log(err);
                }
            })

        this.setState({
            dataCategory : dataCategory,
            imagePreviewUrl : false,
        });
        this.refs.myForm.reset();
        this.refs.myForm.focus();
    }
    handleChange(e){
        this.setState({
            [e.target.categoryName] : e.target.value,
            [e.target.categoryImage] : e.target.value,
            [e.target.categoryDesc] : e.target.value
        })
    }

    render(){

        let {imagePreviewUrl} = this.state;
        let $imagePreview = null;

        if(imagePreviewUrl){
            $imagePreview = (<img alt ="www.google.com" height="100px" src={imagePreviewUrl} />)
        }

        return this.state.imageCabor === "" ? <div></div> : (
            <div>
                <h3>Insert Category Cabang Olahraga </h3>
                <form style={{marginTop: 10}} ref="myForm" onSubmit={this.handleSubmit} encType="multipart/form-data" >
                    <div className="form-group">
                        <label>Nama Category</label>
                        <input
                            name="categoryName"
                            type="text"
                            className="form-control"
                            ref="categoryName"
                            onChange={this.handleChange}               
                        />
                        </div>

                        <div className="form-group">
                        <label>Deskripsi Category </label>
                        <textarea

                            name="categoryDesc"
                            type="text"
                            className="form-control"
                            ref="categoryDesc"
                            rows="5"
                            onChange={this.handleChange}
                        />
                        </div>

                        <div className="form-group">
                            <label>Upload Icon Image</label> <br />
                            <div>{$imagePreview}</div>
                        <input
                            name="categoryImage"
                            type="file"
                            ref="categoryImage"
                            className="image-control"
                            onChange={this.imageHandleChange}
                            />
                        </div>

                        <h1>Cabang Olahraga</h1>
                        <div className ="form-group">
                            <label>Nama Cabang Olahraga</label>
                        <input 
                            name="namaCabor"
                            type="text"
                            className="form-control"
                            ref="namaCabor"
                            value={this.state.namaCabor}
                            />
                        </div>

                        <div className ="form-group">
                            <label>Deskripsi Cabang Olahraga</label>
                        <textarea
                            name="descCabor"
                            type="text"
                            className="form-control"
                            ref="descCabor"
                            rows="5"
                            value={this.state.descCabor}
                            />
                        </div>

                        <div className="form-group">
                            <label>Icon Cabang Olahraga</label> <br />
                            <div><img height="100px" src={this.state.imageCabor.props.src} /></div>
                        </div>

                        <div className="form-group">
                            <input type="submit" value="Apply" className ="btn btn-primary" />
                        </div>

                </form>
            </div>
        );
    }
}

export default Category;

从'react router dom'导入{Link}
类类别扩展了React.Component{
建造师（道具）{
超级（道具）；
这个州={
categoryId:this.props.match.params.id，
数据类别：[]，
类别名称：“”，
类别分类：，
类别图像：“”，
类别图像：，
纳马卡博尔：“，
描述：“，
imgCabor:“”，
imageCabor:“”，
selectedFile:null，
imagePreviewUrl:“”，
档案：“
}
this.handleSubmit=this.handleSubmit.bind（this）；
this.handleChange=this.handleChange.bind（this）；
this.imageHandleChange=this.imageHandleChange.bind（this）；
}
组件willmount（）{
这个.getDetailsData（）；
}
getDetailsData（一）{
让categoryId=this.state.categoryId；
取回(`http://localhost:4000/get/${categoryId}`）。然后（res=>{
如果（资源状态===200）
返回res.json（）.then（resCategoryId=>{
console.log（resCategoryId）；
这是我的国家({
id:resCategoryId.\u id，
namaCabor:resCategoryId.namaCabor，
descCabor:resCategoryId.descCabor，
imgCabor:resCategoryId.imgCabor，
imageCabor:resCategoryId.imageCabor
});
});
}).catch（错误=>{
if（err）console.log（err）；
})
}
图像处理更改（e）{
e、 预防默认值（）；
let reader=new FileReader（）；
让file=e.target.files[0]；
reader.onloadend=（）=>{
这是我的国家({
档案：档案，
imagePreviewUrl:reader.result
});
}
reader.readAsDataURL（文件）；
}
handleSubmit（e）{
e、 预防默认值（）；
设{imagePreviewUrl}=this.state；
const dataCategory=this.state.dataCategory；
让categoryName=this.refs.categoryName.value；
让categoryImage=this.refs.categoryImage.value；
设categoryDesc=this.refs.categoryDesc.value，
categoryImageCabor=（），
namaCabor=this.refs.namaCabor.value，
descCabor=this.refs.descCabor.value，
imageCabor=（）
取（'http://localhost:4000/add', {
模式：'cors'，
方法：'post'，
标题：{
“内容类型”：“应用程序/json”，
“接受”：“应用程序/json”，
“类型”：“formData”
},
正文：JSON.stringify({
categoryName:categoryName，
类别分类：类别分类，
类别图像：类别图像，
categoryImageCabor：categoryImageCabor，
纳马卡博尔：纳马卡博尔，
描述：描述，
imageCabor:imageCabor，
状态：正确
}),
})。然后（res=>{
返回res.json（）；
}).catch（函数（err）{
如果（错误）{
控制台日志（err）；
}
})
这是我的国家({
dataCategory:dataCategory，
imagePreviewUrl:false，
});
this.refs.myForm.reset（）；
this.refs.myForm.focus（）；
}
手变（e）{
这是我的国家({
[e.target.categoryName]：e.target.value，
[e.target.categoryImage]：e.target.value，
[e.target.categoryDesc]：e.target.value
})
}
render（）{
设{imagePreviewUrl}=this.state；
让$imagePreview=null；
如果（imagePreviewUrl）{
$imagePreview=（）
}
返回this.state.imageCabor==“”？：(
插入卡邦·奥拉哈加类别
Nama类别
Deskripsi类别
上传图标图像

{$imagePreview}
卡邦奥拉哈加酒店
纳玛·卡邦·奥拉哈加
奥拉赫拉加卡邦酒店
图标卡邦奥拉哈拉加

);
}
}
导出默认类别；

在我的后端得到了输出。错误：发送邮件后无法设置邮件头。
您需要使用类似以下的formData将formData提交到服务器

var formData = new FormData();
for (const file of this.state.files) {
  formData.append('file', file)
  formData.append('file2', file2)
  formData.append('file3', file3)
}

或者你可以用简单的方式写

var formData = new FormData();
formData.append('file', file)
formData.append('file2', file2)
formData.append('file3', file3)

请根据您的代码进行相应更改

确保将标题也设置为
multipart/formdata

干杯
我认为托尼的回答很好，以下是我这边的几件事
要添加多个文件，请执行以下操作：

您需要为此使用formdata

var data = new FormData();
for (var x = 0; x < files.length; x++) {
    data.append("files" + x, files[x]);
}

var data=new FormData（）；
对于（var x=0；x<