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

3 回复

尝试直接打印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中,图片上传不成功可能由以下原因导致:

  1. 网络问题:检查设备网络连接是否正常,确保网络稳定。
  2. 权限问题:确认应用已获取存储和网络访问权限。
  3. 文件格式或大小:确保图片格式(如JPEG、PNG)和大小符合上传要求。
  4. API或服务器问题:检查上传接口是否正确配置,服务器是否正常运行。
  5. 代码逻辑错误:验证上传代码逻辑,确保正确调用上传方法。

建议逐一排查上述问题,或查看日志以获取更多错误信息。

回到顶部