HarmonyOS鸿蒙Next中图片上传不成功
HarmonyOS鸿蒙Next中图片上传不成功
async uploadImg1(context: Context, imgUri: string) {
let formData = new FormData()
formData.append('file', imgUri) // 发送请求
axios.post<string, AxiosResponse<string>, FormData>(
'http://120.24.250.211:9080/DbCenter/imgInfo/upload?token=' +
CacheUtils.getInstance().getObject(CommonConstants.TOKEN), formData, {
headers: { 'Content-Type': 'multipart/form-data' },
context: context,
onUploadProgress: (progressEvent: AxiosProgressEvent): void => {
console.info(progressEvent && progressEvent.loaded && progressEvent.total ?
Math.ceil(progressEvent.loaded / progressEvent.total * 100) + '%' : '0%');
},
}).then((res: AxiosResponse<string>) => {
console.info("result" + JSON.stringify(res.data));
}).catch((err: AxiosError) => {
console.error("error:" + JSON.stringify(err));
})
}
图片地址: file://media/Photo/3/IMG_1724381318_002/IMG_20240823_104658.jpg
结果: 上传无响应
期望解决方案: 如果能提供一个上传uri图片的demo最好,感谢。
更多关于HarmonyOS鸿蒙Next中图片上传不成功的实战教程也可以访问 https://www.itying.com/category-93-b0.html
尝试直接打印res,若没有的话可更换@ohos.request,on(‘complete’ | ‘fail’)接口可以获取到上传任务返回的结果:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-request-V5#oncomplete–fail9
Axios和FormData实现文件上传功能参考demo
import { picker } from '@kit.CoreFileKit'
import fs from '@ohos.file.fs';
import { Context } from '@kit.AbilityKit';
import fileUri from "@ohos.file.fileuri";
import axios, { AxiosProgressEvent, AxiosRequestConfig, AxiosResponse, FormData } from '@ohos/axios';
class HttpResponseModel{
}
@Entry
@Component
struct UploadPage {
@State imageUrl: string = ''
private context: Context = this.getContext(this)
async executeUpload(filename: string) {
let internalUri = `internal://cache/${filename}`;
console.error('internal uri is:' + internalUri)
let formData = new FormData()
formData.append('file', internalUri)
let request: AxiosRequestConfig<FormData> = {
url: 'input your url',
headers:
{
'Accept': '/',
'Content-Type': 'multipart/form-data',
},
method: "post",
context: this.context,
data: formData,
onUploadProgress: (progressEvent: AxiosProgressEvent): void => {
console.error(progressEvent && progressEvent.loaded && progressEvent.total ? Math.ceil(progressEvent.loaded / progressEvent.total * 100) + '%' : '0%');
}
}
try {
let resp: AxiosResponse<HttpResponseModel> =
await axios.request<HttpResponseModel, AxiosResponse<HttpResponseModel>, FormData>(request)
} catch (e) {
console.error(e)
}
}
build() {
Column() {
Image(this.imageUrl).width(100).height(100).backgroundColor('#F00')
Button('select photo from gallery').onClick(async () => {
let photoSelectOptions = new picker.PhotoSelectOptions();
photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE
photoSelectOptions.maxSelectNumber = 1
let uris: Array<string> = [];
const photoViewPicker = new picker.PhotoViewPicker()
let ctx = this.getContext(this)
console.error(ctx.cacheDir)
console.error(ctx.filesDir)
let photoSelectResult = await photoViewPicker.select(photoSelectOptions)
uris = photoSelectResult.photoUris;
let tmp_imageUri = uris[0]
console.error(`select image uri:${tmp_imageUri}`)
fs.open(tmp_imageUri, (err, file) => {
if (err) {
console.error("file open failed with error message: " + err.message + ", error code: " + err.code);
} else {
let filename = '111.jpg'
let filepath = this.context.cacheDir + '/' + filename;
console.error('filename is:' + filename + ', file path is:' + filepath)
fs.copyFile(file.fd, filepath, () => {
this.imageUrl = fileUri.getUriFromPath(filepath)
this.executeUpload(filename)
});
}
})
})
}
}
}
更多关于HarmonyOS鸿蒙Next中图片上传不成功的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next中,图片上传不成功可能涉及多个方面。首先,检查网络连接是否正常,确保设备能够访问互联网。其次,确认应用的权限设置,确保应用具有访问存储和网络的权限。如果权限不足,图片上传可能会失败。此外,检查图片的格式和大小是否符合上传要求,某些应用可能对图片的格式和大小有限制。如果图片格式不受支持或文件过大,上传会失败。
另外,检查应用的上传接口是否正确配置,确保上传的URL和参数正确无误。如果接口配置错误,上传请求可能无法成功发送。还可以查看应用的日志或错误信息,获取更多关于上传失败的详细信息,帮助定位问题。如果问题仍然存在,可以尝试重启设备或重新安装应用,排除临时性故障或应用损坏的可能性。
在HarmonyOS鸿蒙Next中,图片上传不成功可能由以下原因导致:
- 网络问题:检查设备网络连接是否正常,确保网络稳定。
- 权限问题:确认应用已获取存储和网络访问权限。
- 文件格式或大小:确保图片格式(如JPEG、PNG)和大小符合上传要求。
- API或服务器问题:检查上传接口是否正确配置,服务器是否正常运行。
- 代码逻辑错误:验证上传代码逻辑,确保正确调用上传方法。
建议逐一排查上述问题,或查看日志以获取更多错误信息。