uni.uploadFile等其他功能上传参数返回值不是json格式解决方案

最新推荐文章于 2025-05-27 09:00:00 发布

原创最新推荐文章于 2025-05-27 09:00:00 发布 · 4.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #uni-app #前端 #开发语言 #json

除uni.uploadFile，其他涉及选择完文件或图片上传，提取画板图片上传，都存在返回值不是json而是字符串的问题。

这里用上传图片和视频的uni.chooseMedia获取文件后上传uploadFile举例。代码如下：

uni.chooseMedia({
success: (res) => {
	const tempFiles = res.tempFiles
	for(const i in tempFiles){
		uni.uploadFile({
			url: config.apiUrl + '/api/fileUpload',//写你自己的接口
			filePath: tempFiles[i].tempFilePath,
			name: 'file',
			success: (uploadFileRes) => {
				console.log(uploadFileRes)
			},
			fail: err => {
			    console.log(err)
			}
		});
	}
}
})

接口正常，打印如下：

可以看到返回值中的data是字符串，虽然data中的内容是json格式但network(网络中)查看返回值如下：

network中查看接口发现返回值与直接打印的data格式不同，而且返回值开头

还多了特殊符号ï»¿

尝试用js中格式转化来转化data。

uni.chooseMedia({
success: (res) => {
	const tempFiles = res.tempFiles
	for(const i in tempFiles){
		uni.uploadFile({
			url: config.apiUrl + '/api/fileUpload',//写你自己的接口
			filePath: tempFiles[i].tempFilePath,
			name: 'file',
			success: (uploadFileRes) => {
				console.log(JSON.parse(uploadFileRes))//转化为json格式
			},
			fail: err => {
			    console.log(err)
			}
		});
	}
}
})

发现转化成功，就可以直接使用了。但如果出现了刚才的特殊符号，也就是 ï»¿，那就会报错如下：

这是提示被转化为json的参数并不是json格式，但参数确实是json格式，所以要去掉这个 ï»¿ 特殊符号。这个符号是php接口携带的bom头（其他框架写接口还没见过）。

使用replace去掉这个bom头即可将参数转化为json,代码如下（.replace('\uFEFF', '')）：

uni.chooseMedia({
success: (res) => {
	const tempFiles = res.tempFiles
	for(const i in tempFiles){
		uni.uploadFile({
			url: config.apiUrl + '/api/fileUpload',//写你自己的接口
			filePath: tempFiles[i].tempFilePath,
			name: 'file',
			success: (uploadFileRes) => {
				let imgData =JSON.parse(uploadFileRes.data.replace('\uFEFF', ''))
				console.log(imgData)
			},
			fail: err => {
			    console.log(err)
			}
		});
	}
}
})

打印如下：