HarmonyOS 鸿蒙Next 文件上传formData打印为空?发给后端后端显示file为null
HarmonyOS 鸿蒙Next 文件上传formData打印为空?发给后端后端显示file为null
//存储图片 @State avatar: FormData = new FormData()
//上传头像 Column() { Stack() { Image(this.profileImage) .alt($r(‘app.media.uploadImage’)) .width(100) .height(100) .objectFit(ImageFit.Cover) if (this.uri) { Image($rawfile(“functionImage/diary_cancel.png”)) .position({ right: 7, top: 7 }) .width(25) .height(25) .onClick(() => { this.profileImage = new Object() as PixelMap this.uri = “” }) } } .width(100) .height(100)
if (!this.uri) { Text(“请上传图片”) .fontSize(24) .margin({ top: 10 }) } } .margin({ bottom: 30 }) .onClick(async () => { if (!this.uri) { const uri = await uploadImage() if (uri) { try { // 以只读模式打开指定的文件,通过传入的uri参数确定要打开的文件位置 const file = fileIo.openSync(uri, fileIo.OpenMode.READ_ONLY) // 构建一个新的文件路径,存储拷贝后的文件 const filePath = getContext(this).cacheDir + ‘/’ + file.name console.log(“filePath”, filePath) console.log(“file.fd”, file.fd) //设置回显的地址 this.uri = filePath // 通过uri打开图片文件,获取文件fd const imageSourceApi = image.createImageSource(file.fd); // 将图片解码为pixelmap imageSourceApi.createPixelMap().then(pixelmap => { this.profileImage = pixelmap console.log(‘Succeeded in creating pixelmap object through image decoding parameters.’) }).catch((err: BusinessError) => { console.log(‘Failed to create pixelmap object through image decoding parameters.’) })
// 将打开的文件同步的复制到新构建的文件路径
fileIo.copyFileSync(file.fd, filePath)
// 关闭打开的文件,释放资源
fileIo.closeSync(file.fd)
// 创建一个新的FormData对象,用于准备文件上传 这是axios上传图片需要的对象类型 FormData
// 添加一个名字叫file的数据,数据需要 `internal://cache/在沙箱目录的文件地址`
// console.log("avatar", file.name)
// this.avatar.append('file', `internal://cache/${file.name}`)
this.avatar.append('file', `internal://${file.name}`)
this.cacheUri = `internal://${file.name}`
console.log("cacheUri", this.cacheUri)
console.log("this.avatar",JSON.stringify(this.avatar))
} catch (e) {
AlertDialog.show({ message: '头像选择失败' + JSON.stringify(e) })
}
} else {
DialogUtil.showConfirmDialog({
title: "获取图片失败",
message: '',
confirm: "确定",
onAction: () => {
}
})
}
} })
export const uploadImageApi = (file: FormData) => { return axios.post(“http://192.168.43.223:8080/common/upload”, file, { headers: { ‘Content-Type’: ‘multipart/form-data’ } }) .then((res: ResponseType) => { // 处理成功响应,将文件路径返回 return res.data; }) .catch((error: AxiosError<ApiResponse<null>>) => { // 处理错误响应,抛出错误以便调用者捕获 return Promise.reject(error); }); }
但是当我点击注册时报错:
并且后端报错:
更多关于HarmonyOS 鸿蒙Next 文件上传formData打印为空?发给后端后端显示file为null的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
检查一下这个地方,这个file是和后端约定好的,不是固定写成‘file’,另外,传值改成这样,试试行不行了
更多关于HarmonyOS 鸿蒙Next 文件上传formData打印为空?发给后端后端显示file为null的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
好的谢谢大佬了我又去axios官网文档看了看,重新把请求写了一下可以了,
大佬 所以最够具体是改成咋样提交才有效果啊
我后来发现我之前上传图片的格式写错了,可以看这个axios的文档里面有文件上传的方法,下面是我看着他文档抄的,因为之前参加比赛时间太紧了,我没有封装,你可以封装一下再使用。
这个是鸿蒙axios的文档,如果你使用axios你可以看看
https://gitee.com/openharmony-sig/ohos_axiosh
// 发送请求
axios.post<string, AxiosResponse<ApiResponse<string>>, FormData>('http://192.168.43.223:8080/common/upload',
this.avatar, {
headers: { 'Content-Type': 'multipart/form-data' },
context: getContext(this),
onUploadProgress: (progressEvent: AxiosProgressEvent): void => {
console.info(progressEvent && progressEvent.loaded && progressEvent.total ?
Math.ceil(progressEvent.loaded / progressEvent.total * 100) + '%' : '0%');
},
}).then(async (res: AxiosResponse<ApiResponse<string>>) => {
console.info("result" + JSON.stringify(res.data));
if (res.data.data) {
//如果图片上传成功再上传的表单
const form: registerModel = {
email: this.email,
userName: this.userName,
password: this.password,
userAvatar: res.data.data,
checkPassword: this.rePassword,
code: this.code
}
const resRe = await registerApi(form);
// 处理成功情况
if (resRe.code == 1) {
this.isLoad = false
ToastUtil.showShort("注册成功");
setTimeout(() => {
router.back()
}, 1000)
} else {
this.isLoad = false
DialogUtil.showConfirmDialog({
title: "注册失败",
message: resRe.msg,
confirm: "确定",
onAction: () => {
}
})
}
} else {
this.isLoad = false
DialogUtil.showConfirmDialog({
title: "图片上传失败",
message: '',
confirm: "确定",
onAction: () => {
}
})
}
}).catch((err: AxiosError) => {
this.isLoad = false
AlertDialog.show({ message: '头像上传失败了' + JSON.stringify(err) })
console.error("error:" + JSON.stringify(err));
})
在HarmonyOS鸿蒙系统中,如果你遇到使用formData进行文件上传时,后端显示file为null的问题,这通常与formData的构建或文件对象的处理有关。以下是一些可能的原因及解决方案:
-
文件对象未正确添加:确保在构建formData时,文件对象是以正确的键(key)被添加的。例如,使用
formData.append('file', fileObject);
,其中'file'
应与后端期望的键一致。 -
文件对象无效:检查文件对象是否有效,即用户是否确实选择了文件,并且文件对象不是
null
或undefined
。 -
Content-Type问题:虽然HarmonyOS的HTTP请求库通常会处理Content-Type,但如果你手动设置了Content-Type,确保它包含
multipart/form-data
且边界正确。 -
后端解析问题:确认后端服务器能够正确解析multipart/form-data格式的数据,特别是关于文件部分的解析。
-
网络问题:检查网络连接是否稳定,以及是否有防火墙或代理服务器可能阻止或修改了请求。
如果以上检查后问题依旧没法解决,请联系官网客服。官网地址是:https://www.itying.com/category-93-b0.html,