问题描述:
在使用uniapp开发前段项目时,不论使用axios请求,还是uniapp内置的请求方法,在post请求,且content-type:form-data,传递表单数据时,发现未自动生成Boundary,导致后端无法正常接收数据(在直接使用vue+axios开发时,post请求设置请求头content-type:form-data;浏览是正常的且自动生成boundary,后端接口可以正常接收数据)
解决办法:
1.手段生成boundary,仅限普通对象数据(文件类型的二进制数据不能传递,后端接收不到,该问题暂未解决)
const boundary = '----WebKitFormBoundary' + Math.random().toString(36).substr(2, 16);
const processField = async (name, obj) => {
let result = ''
if (obj[name] !== undefined) {
let value = obj[name];
if (value instanceof File) {
const buffer = await new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = () => resolve(reader.result)
reader.onerror = reject
reader.readAsArrayBuffer(value)
})
result +=
'\r\n--' + boundary +
'\r\nContent-Disposition: form-data; name=\"' + name + '; filename=' + value.name + '\"' +
'\r\nContent-Type:' + value.type +
'\r\n' +
'\r\n' + new Uint8Array(buffer).reduce((acc, byte) => acc + String.fromCharCode(byte), '')
} else {
result +=
'\r\n--' + boundary +
'\r\nContent-Disposition: form-data; name=\"' + name + '\"' +
'\r\n' +
'\r\n' + value
}
}
return result
}
// 循环普通对象
const fillter = async function (obj) {
let result = ''
for (let name of Object.keys(obj)) {
result += await processField(name, obj)
}
return result + '\r\n--' + boundary + '--'
}
- 直接使用uniapp自带上传文件api uni.uploadFile
const token = uni.getStorageSync('accessToken')
uni.uploadFile({
filePath: '123123', // 文件名称随意填写,不影响数据传递
url: '/api/agent/merchant/apply/save', //仅为示例,并非真实接口地址。
formData: obj,
header: {
Authorization: `Bearer ${token}`,
},
complete: (data) => {
const res = JSON.parse(data.data)
if (res.code === 0) {
showSuccessToast("进件成功!")
uni.redirectTo({
url: "/pages/merchant/apply/success"
})
resetForm()
} else {
showFailToast({
message: res.message,
duration: 1500,
forbidClick: true
})
}
isLoading.value = false
},
});