处理从 React js 上传多张图片

Question

早上好，我遇到了一些代码的问题，仅供参考，我对 react js 还是新手，我尝试从 react 上传多个图像以表达并将其保存到 mongoDB ，我已经重新搜索我需要在我的节点 js 中使用 multer，但我不知道需要传递的参数，因为在反应中我有 1 个要上传的文件字段名称，但在我的提交数据中有 2 个数据要发送.

handleSubmit(e){
    e.preventDefault();

    // var formData = new FormData();
    // formData.append('file', e.target.value)
    // formData.append('file2', e.target.value)

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

//node js code
//i dont know the argument need to pass in here
app.post('/', upload.array('catagoryImage', 12), (req, res, next) =>{
    const files = req.files;
    if(!files){
        const error = new Error('Please choose files')
        error.httpStatusCode = 400
        return next(err)
    }
    res.send(files);
}}

Answer 1

要将图像与数据一起从前端发送到后端，您需要将其包装在 FormData 对象中，如下所示：

let formData = new FormData();
formdata.append('keyName','value') //replace keyName with your key and value with its value.

并且不要在您的获取请求中设置任何标头。这应该做。试试看，让我知道。 希望对你有帮助！！