openharmony上传图片,并获取返回路径

适用条件:

openharmony开发

4.0 release版本,对应能力API10

一直不断尝试,一会用官方提供的上传文件,一会用第三方库的axios都不行,

一会报错'没权限,一会报错'路径错误,还有报错'401参数错误的,反正各种报错都遇到了,官方文档说的不够仔细,示例也不够清楚,痛苦

首先一定要动态获取权限,很重要 (即使在modules.json5文件里面已经说明了,在页面上还是要判断一下有咩有,然后申请权限)

写在onPageShow里,我没有加是否存在权限的判断,需要自行判断,有权限就不弹了,没权限在向用户申请,弹弹窗

复制代码
import abilityAccessCtrl, { Context, PermissionRequestResult } from '@ohos.abilityAccessCtrl';
复制代码
let atManager: abilityAccessCtrl.AtManager = abilityAccessCtrl.createAtManager();
let context: Context = getContext(this) as common.UIAbilityContext;
await atManager.requestPermissionsFromUser(context, [
  "ohos.permission.WRITE_MEDIA",
  "ohos.permission.READ_MEDIA",
], (err: BusinessError, data: PermissionRequestResult) => {
  if (err) {
    console.log(`requestPermissionsFromUser fail, err->${JSON.stringify(err)}`);
  } else {
    console.info('这是data:' + JSON.stringify(data));
    console.info('data permissions:' + data.permissions);
    console.info('data authResults:' + data.authResults); //如果是0则是有权限了
  }
})

看到这个弹窗,才算权限申请生效了

其次,一定要进行文件的复制,这样才能获取到文件(在下面代码)

方法一,使用官方提供的上传文件请求

javascript 复制代码
import fs from '@ohos.file.fs';
import request from '@ohos.request';


 //fileUri是文件选择器返回的路径,格式如下: "datashare:///media/image/45"

  async uploadImg(fileUri: string) {

    / 获取应用文件路径
    const context = getContext(this) as common.UIAbilityContext;
    let cacheDir = context.cacheDir;  
    console.log('cacheDir', cacheDir); 
    //=>沙箱路径 /应用文件目录 /data/storage/el2/base/haps/entry/cache
   
    //文件名称,下面这两种方法都可以,原则就是保持名字随机性
     // let segments = fileUri.split('/')
    // let fileName = segments[segments.length-1]
    const fileName = Date.now() + '.jpg'
    //复制这一步一定不能少 ,简而言之,就是把我们的内部文件拿到外部暴露出来,
    let realUri = context.cacheDir + "/" + fileName //计划复制到的目标路径
    try {
      let file =  fs.openSync(fileUri);
      fs.copyFileSync(file.fd, realUri)
    } catch (err) {
      console.info('err:' + JSON.stringify(err));
    }


// // 鸿蒙自带请求
    let uploadTask: request.UploadTask;
    let uploadConfig: request.UploadConfig = {
      url: 'http://upload', //需要手动替换为真实服务器地址
      header: { 'Content-Type': 'multipart/form-data', token: AppStorage.get('token') },
      method: "POST",
      files: [{ filename: fileName, name: "image", uri: `internal://cache/${fileName}`, type: "jpg" }],
//注意这里,files里面的url一定是'internal://cache/'和文件名的拼接,不要拼其他路径!!!
      data: [],
    };
    //一定要定义类型,这里的类型定义真的很让人头大
    interface path{
      filePath:string
    }
    interface  bodyType{      
       code:string
      success:string
      data:path
    }
    interface resType{
      body:bodyType
    }
    try {
      request.uploadFile(context, uploadConfig).then((data: request.UploadTask) => {
        uploadTask.on('headerReceive', (header:object) => {
          const picRes:resType = header as resType
          console.log('上传头picRes', picRes.body )
        })
        uploadTask.on("complete", () => {
          promptAction.showToast({ message: '上传成功!', duration: 2000 })
          // 上传成功调接口
        })
      }).catch((err: BusinessError) => {
        console.error(`Failed to request the upload. Code: ${err.code}, message: ${err.message}`);
      });
    } catch (err) {
      console.error(`Failed to request the upload. err: ${JSON.stringify(err)}`);
    }

  }

方法二,使用第三方库 @ohos/axios,创建formdata对象请求

javascript 复制代码
import fs from '@ohos.file.fs';
import axios, { AxiosError, AxiosProgressEvent, AxiosResponse, FormData, InternalAxiosRequestConfig } from '@ohos/axios'



 //fileUri是文件选择器返回的路径,格式如下: "datashare:///media/image/45"

  async uploadImg(fileUri: string) {

    / 获取应用文件路径
    const context = getContext(this) as common.UIAbilityContext;
    let cacheDir = context.cacheDir;  
    console.log('cacheDir', cacheDir); 
    //=>沙箱路径 /应用文件目录 /data/storage/el2/base/haps/entry/cache
   
    //文件名称,下面这两种方法都可以,原则就是保持名字随机性
     // let segments = fileUri.split('/')
    // let fileName = segments[segments.length-1]
    const fileName = Date.now() + '.jpg'
    //复制这一步一定不能少 ,简而言之,就是把我们的内部文件拿到外部暴露出来,
    let realUri = context.cacheDir + "/" + fileName //计划复制到的目标路径
    try {
      let file =  fs.openSync(fileUri);
      fs.copyFileSync(file.fd, realUri)
    } catch (err) {
      console.info('err:' + JSON.stringify(err));
    }

// 第三方库axios请求
    let formData = new FormData();
    formData.append('image', `internal://cache/${fileName}`);
    // formData.append('image',  'internal://cache/'+fileName);
    //记得替换真实请求地址
    axios.post<string, AxiosResponse<string>, FormData>('http://upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data',
        'token': AppStorage.get('token')
      },
      context: getContext(this),
      onUploadProgress: (progressEvent: AxiosProgressEvent): void => {
        console.info(progressEvent && progressEvent.loaded && progressEvent.total ? Math.ceil(progressEvent.loaded / progressEvent.total * 100) + '%' : '0%');
      },
    }).then((res: AxiosResponse) => {
      interface  pathType{
        filePath:string
      }
      interface dataType{
        data:pathType
      }
      const data: dataType = res.data as dataType
      const path = data.data.filePath
      console.info("request result" ,path);
    }).catch((error: AxiosError) => {
      console.error("error:" + JSON.stringify(error));
    })

  }

别夸我,我真是个菩萨,经历了九九八十一难,搞了两天才弄好的上传方法

如果描述哪里不正确,不完整,及时告知我噢

相关推荐
nju_spy8 小时前
华为AI岗 -- 笔试(一)
人工智能·深度学习·机器学习·华为·笔试·dbscan·掩码多头自注意力
安卓开发者10 小时前
鸿蒙NEXT按键拦截与监听开发指南
华为·harmonyos
2503_9284115610 小时前
10.13 Tabs选项卡布局
华为·harmonyos·鸿蒙
我爱学习_zwj12 小时前
【鸿蒙进阶-7】鸿蒙与web混合开发
前端·华为·harmonyos
HMSCore15 小时前
消息推送策略:如何在营销与用户体验间找到最佳平衡点
harmonyos
HMSCore15 小时前
同一设备多账号登录,如何避免消息推送“串门”?
harmonyos
零點壹度ideality16 小时前
鸿蒙实现可以上下左右滑动的表格-摆脱大量ListScroller
前端·harmonyos
●VON17 小时前
重生之我在大学自学鸿蒙开发第七天-《AI语音朗读》
学习·华为·云原生·架构·harmonyos
Industio_触觉智能17 小时前
RK3576开发板/核心板应用分享之开源鸿蒙
鸿蒙·openharmony·嵌入式开发·开源鸿蒙·鸿蒙开发板·鸿蒙南向·xts
我是华为OD~HR~栗栗呀18 小时前
华为OD-21届考研-Java面经
java·前端·c++·python·华为od·华为·面试