首页 > 解决方案 > Error: Multipart: Boundary not found - using Fetch (reactJS & expressJS)

问题描述

I want to upload xlxs file from reactjs FE and expressjs BE. when i try that API in postman. it's work, but when i integrate to FE, i got error message

Error: Multipart: Boundary not found

this is my BE:

UploadPegawai(req,res){
 ...
 const query = `INSERT INTO "pegawais("npp","nama","tanggal_lahir","mitra","lokasi_tugas","kode_status_aktif","mulai_pegawai_tetap","no_skep_masa_persiapan_pensiun","tanggal_skep_masa_persiapan_pensiun") VALUES` + listPegawai.map(listPegawai => {return `('${listPegawai.npp}','${listPegawai.nama}', '${listPegawai.tanggal_lahir.toLocaleDateString()}','${listPegawai.mitra}', '${listPegawai.lokasi_tugas}',${listPegawai.kode_status_aktif},'${listPegawai.mulai_pegawai_tetap.toLocaleDateString()}','${listPegawai.no_skep_masa_persiapan_pensiun}',${(listPegawai.tanggal_skep_masa_persiapan_pensiun != null ? `'${listPegawai.tanggal_skep_masa_persiapan_pensiun.toLocaleDateString()}'` : null)})`}) + 
`ON CONFLICT (npp) DO UPDATE SET "nama" =  EXCLUDED."nama","mitra" =  EXCLUDED."mitra","lokasi_tugas"=EXCLUDED."lokasi_tugas","kode_status_aktif"=EXCLUDED."kode_status_aktif","no_skep_masa_persiapan_pensiun"=EXCLUDED."no_skep_masa_persiapan_pensiun","tanggal_skep_masa_persiapan_pensiun"=EXCLUDED."tanggal_skep_masa_persiapan_pensiun"`await Pegawai.sequelize.query({query, listPegawai}, { type: Pegawai.sequelize.QueryTypes.INSERT }).then(()=> {
let result = {
   status: "ok",
   filename: req.file.originalname,
   message: "Upload pegawai berhasil!"
}res.json(result);
})
  }
})
...

and this is my FE

uploadPegawai = event => {
        event.preventDefault();
        const file = this.state.Pegawai
        const Pegawai = new FormData()
        Pegawai.append('Pegawai', file)
        fetch('http://192.168.11.89:5000/uploadpegawai', {
            method: 'POST',
            body: Pegawai,
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'multipart/form-data'
            },
        })
        .then(res => res.json())
        .then(data => console.log(data))
        .catch((err) => console.log(err));
        
    }
....
 <Form>
                        <Table responsive className="table">
                            <TableBody>
                                    <TableRow>
                                        <td style={{width: '40%'}}><Form.File className="uploadFile" id='uploadPegawai' name="Pegawai" label="Upload data pegawai " required value={Pegawai} onChange={this.onPegawaiChange} /></td>
                                        <td><Button className="buttonWithNoBottomMargin" onClick={this.uploadPegawai}>Upload Data Pegawai</Button></td>
                                    </TableRow>
                            </TableBody>
                        </Table>
                    </Form>

标签: javascriptnode.jsreactjsexpressupload

解决方案


推荐阅读