javascript - 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>
解决方案
推荐阅读
- java - 是否可以在没有类型继承的情况下从另一个类/方法继承 javadoc?
- javascript - 使点击穿过一个元素到它后面的一个元素
- clickhouse - Apache Pulsar Clickhouse Sink - 插入之间是否有间隔?
- python - pygame.Rect.colliderect() 给我错误
- apache-spark - 从 pyspark 中的连接条件中获取列时出错
- javascript - 为什么 React Component 在每次 useEffect 依赖项更改时都会卸载?
- tizen-native-app - 传感器记录器时间段不遵循查询设置
- c++ - 如何将二维数组作为参数传递给 C++ 中的函数?
- python - 熊猫根据条件将列添加到具有另一行的值的数据框
- go - 如何重构数据