[英]How to pass multiple values while uploading image to server(File Upload with AngularJS and NodeJS)?
[英]Not able to pass Multiple image to Server Nodejs
我已经使用 android studio 创建了一个应用程序,并使用 NodeJs 为服务器端创建了一个应用程序。我试图传递单个图像并且能够传递。 这一次,我想将多个图像传递给服务器,但是当我在 Api.kt 文件中将参数从image:MultipleBody.Part
更改为images:List<MultipartBody.Part>
时,在服务器端收到错误消息。 我不知道我做错了一部分。 希望能帮我解决这个问题。 先感谢您。
$ node app 正在监听端口 4545... MulterError: 在 Busboy 的wrappedFileFilter (C:\\Users\\user\\Documents\\GitHub\\EIS-API\\node_modules\\multer\\index.js:40:19) 出现意外字段。 (C:\\Users\\user\\Documents\\GitHub\\EIS-API\\node_modules\\multer\\lib\\make-middleware.js:114:7) 在 Busboy.emit (events.js:223:5) 在 Busboy.emit ( C:\\Users\\user\\Documents\\GitHub\\EIS-API\\node_modules\\busboy\\lib\\main.js:38:33) 在 PartStream。 (C:\\Users\\user\\Documents\\GitHub\\EIS-API\\node_modules\\busboy\\lib\\types\\multipart.js:213:13) 在 HeaderParser 的 PartStream.emit (events.js:223:5)。 (C:\\Users\\user\\Documents\\GitHub\\EIS-API\\node_modules\\dicer\\lib\\Dicer.js:51:16) at HeaderParser.emit (events.js:223:5) at HeaderParser._finish (C: \\Users\\user\\Documents\\GitHub\\EIS-API\\node_modules\\dicer\\lib\\HeaderParser.js:68:8) 在 SBMH。 (C:\\Users\\user\\Documents\\GitHub\\EIS-API\\node_modules\\dicer\\lib\\HeaderParser.js:40:12) MulterError: 在wrappedFileFilter 的意外字段 (C:\\Users\\user\\Documents\\GitHub\\EIS- API\\node_modules\\multer\\index.js:40:19) 在 Busboy。 (C:\\Users\\user\\Documents\\GitHub\\EIS-API\\node_modules\\multer\\lib\\make-middleware.js:114:7) 在 Busboy.emit (events.js:223:5) 在 Busboy.emit ( C:\\Users\\user\\Documents\\GitHub\\EIS-API\\node_modules\\busboy\\lib\\main.js:38:33) 在 PartStream。 (C:\\Users\\user\\Documents\\GitHub\\EIS-API\\node_modules\\busboy\\lib\\types\\multipart.js:213:13) 在 HeaderParser 的 PartStream.emit (events.js:223:5)。 (C:\\Users\\user\\Documents\\GitHub\\EIS-API\\node_modules\\dicer\\lib\\Dicer.js:51:16) at HeaderParser.emit (events.js:223:5) at HeaderParser._finish (C: \\Users\\user\\Documents\\GitHub\\EIS-API\\node_modules\\dicer\\lib\\HeaderParser.js:68:8) 在 SBMH。 (C:\\Users\\user\\Documents\\GitHub\\EIS-API\\node_modules\\dicer\\lib\\HeaderParser.js:40:12)
api.kt
@Multipart
@POST("perkhidmatan_rumput/api/PostPemantauanPerkhidmatanPotingRumput" +
"/{zon}/{syarikat}/{alamat_syarikat}/{nama_penyelia}/{taman}/{bulan}/{tahun}" +
"/{masa}/{timeAMPM}/{pusingan}/{status}/{catatan}/{state}/{entryOperator}")
fun postPemantauanPerkhidmatanPotingRumput(
@Path("zon")zon:String,
@Path("syarikat")syarikat:String,
@Path("alamat_syarikat")alamat_syarikat:String,
@Path("nama_penyelia")nama_penyelia:String,
@Path("taman")taman:Int,
@Path("bulan")bulan:String,
@Path("tahun")tahun:String,
@Path("masa")masa:String,
@Path("timeAMPM")timeAMPM:String,
@Path("pusingan")pusingan:String,
@Path("status")status:String,
@Path("catatan")catatan:String,
@Path("state")state:String,
@Path("entryOperator")entryOperator:String,
@Part images:List<MultipartBody.Part>
//@Part image:MultipartBody.Part?
):LiveData<GenericApiResponse<OnResponse>>
PemoViewModel.kt
public fun getAllImages():List<MultipartBody.Part>?{
var info = getCurrentViewStateOrNew()
var pic:List<GambarSebelum>? = info.gambarSebelum
var images = mutableListOf<MultipartBody.Part>()
pic?.let {
for ( item in it){
var multipartBody: MultipartBody.Part? = null
item.url?.path?.let { filePath ->
val imageFile = File(filePath)
val requestBody =
RequestBody.create(
MediaType.parse("image/*"),
imageFile
)
multipartBody = MultipartBody.Part.createFormData(
"image",
imageFile.name,
requestBody
)
}
images.add(multipartBody!!);
}
}
return images;
}
PemoFragment.kt
_binding.btnLogin.setOnClickListener {
if(!isFill()){
Toast.makeText(requireContext(),"sila penuhkan ruang diatas..",Toast.LENGTH_SHORT).show()
return@setOnClickListener
}
var bulan:String = CALENDER.valueOf(_binding.idBulanSpinner.selectedItem.toString()).value
var taman:Int? = _viewModel.getTamanIdByTamanName(_binding.idTamanSpinner.selectedItem.toString())
var pusingan:String? = _viewModel.getPusinganByPusinganName(_binding.idPusinganSpinner.selectedItem.toString())
var status:String? = _viewModel.getStatusByStatusName(_binding.idStatusSpinner.selectedItem.toString())
var images:List<MultipartBody.Part>? = _viewModel.getAllImages()
if(taman != null && pusingan != null && status != null){
//insert information to server (database)
_viewModel.setStateEvent(
FormRumputStateEvent.SubmitPemantauanForm(
PemantauanPotongRumputResponse(
_binding.idZonsSpinner.selectedItem.toString(),
_binding.idNamaSyarikatEdit.text.toString(),
_binding.idAlamatSyarikat.text.toString(),
_binding.idNamaPenyeliaKontraktorEdit.text.toString(),
taman,
bulan,
_binding.idTahunEdit.text.toString(),
_binding.idMasaEdit.text.toString(),
_binding.idAmPmSpinner.selectedItem.toString(),
pusingan,
status,
_binding.idCatatanEdit.text.toString(),
STATE_STATUS.CREATE.name,
"ADMIN",
images!!
)
))
}else{
Toast.makeText(requireContext(),"[Error] Taman,Bulan,pusingan or status has Problem..",Toast.LENGTH_SHORT).show()
return@setOnClickListener
}
}
PemantauanPotongRumputResponse
data class PemantauanPotongRumputResponse(
@Expose
@SerializedName("zon")
val zon:String,
@Expose
@SerializedName("syarikat")
val syarikat:String,
@Expose
@SerializedName("alamat_syarikat")
val alamat_syarikat:String,
@Expose
@SerializedName("nama_penyelia")
val nama_penyelia:String,
@Expose
@SerializedName("taman")
val taman:Int,
@Expose
@SerializedName("bulan")
val bulan:String,
@Expose
@SerializedName("tahun")
val tahun:String,
@Expose
@SerializedName("masa")
val masa:String,
@Expose
@SerializedName("timeAMPM")
val timeAMPM:String,
@Expose
@SerializedName("pusingan")
val pusingan:String,
@Expose
@SerializedName("status")
val status:String,
@Expose
@SerializedName("catatan")
val catatan:String,
@Expose
@SerializedName("state")
val state:String,
@Expose
@SerializedName("entryOperator")
val entryOperator:String,
@Expose
@SerializedName("images")
val images:List<MultipartBody.Part>
)
服务器端节点.JS
router.post('/api/PostPemantauanPerkhidmatanPotingRumput/:zon/:syarikat/:alamat_syarikat/'+
':nama_penyelia/:taman/:bulan/:tahun/:masa/:timeAMPM/:pusingan/:status/:catatan/:state/'+
':entryOperator', upload.array('images',9),(req,res,next) =>{
try{
const file = req.files;
if (!file) {
res.status(400).json({
"status": "failed",
"code" : "400",
"message" : "Please upload file"
});
}
res.status(200).json({
"status": "success",
"code" : "200",
"message" : "file uploaded successfully"
});
console.log(file);
console.log(req.body);
}catch(err){
console.log(error.message);
res.status(200).json({
"status": "failed",
"code" : "500",
"message" : error.message
});
}
})
能够解决问题。 只需确保MultipartBody.Part.createFormData
的第一个参数“images”与服务器端参数upload.array("images")
multipartBody = MultipartBody.Part.createFormData(
"images",
imageFile.name,
requestBody
)
PemoViewMode.kt
public fun getAllImages():List<MultipartBody.Part>?{
var info = getCurrentViewStateOrNew()
var pic:List<GambarSebelum>? = info.gambarSebelum
var images = mutableListOf<MultipartBody.Part>()
pic?.let {
for ( item in it){
var multipartBody: MultipartBody.Part? = null
item.url?.path?.let { filePath ->
val imageFile = File(filePath)
val requestBody =
RequestBody.create(
MediaType.parse("image/*"),
imageFile
)
multipartBody = MultipartBody.Part.createFormData(
"images",
imageFile.name,
requestBody
)
}
images.add(multipartBody!!);
}
}
return images;
}
服务器端(节点)
router.post('/api/PostPemantauanPerkhidmatanPotingRumput/:zon/:syarikat/:alamat_syarikat/'+
':nama_penyelia/:taman/:bulan/:tahun/:masa/:timeAMPM/:pusingan/:status/:catatan/:state/'+
':entryOperator', upload.array('images',9),(req,res,next) =>{
try{
const file = req.files;
if (!file) {
res.status(400).json({
"status": "failed",
"code" : "400",
"message" : "Please upload file"
});
}
res.status(200).json({
"status": "success",
"code" : "200",
"message" : "file uploaded successfully"
});
console.log(file);
console.log(req.body);
}catch(err){
console.log(error.message);
res.status(200).json({
"status": "failed",
"code" : "500",
"message" : error.message
});
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.