鸿蒙 图片选取 上传

import picker from '@ohos.file.picker';

@Entry

@Component

//图片选取

struct initOrder{


//上传图片接口

updateImageRequest(uris:Array<string>){

  let url:string = 'https://www.baidu.com' //用户请求的url

  upLoadImageConfig(url, uris).then((task)=>{

    task.on('progress', (progress:request.agent.Progress)=>{

      //订阅任务进度事件

    })

    task.on('completed', (progress:request.agent.Progress)=>{

      //订阅任务完成事件

      //值得注意的是后台返回的数据会在此回调返回, 并且在请求header中添加Accept-Encoding参数的话返回的数据会乱码

      if (progress.extras != undefined) {

        //后台返回的数据

        let data:string = progress.extras['body'] as string

        let model:Record<string, string> = JSON.parse(data)

        console.log(JSON.stringify(model))

      }

    })

    task.on('failed', (progress:request.agent.Progress)=>{

      //订阅任务失败事件

    })

    task.on('pause', (progress:request.agent.Progress)=>{

      //订阅任务暂停

    })

    task.on('resume', (progress:request.agent.Progress)=>{

      //订阅任务恢复事件

    })

    task.on('remove', (progress:request.agent.Progress)=>{

      //订阅任务删除事件

    })

    task.start() //这句话很重要 忘记写的话会不执行此接口

  })

}

  build(){

    Column(){

      Button("selectetImg")

        .onClick(()=>{

          examples(1)?.then((imgRequest)=>{

            imgRequest.photoUris.forEach(async (element:string)=>{

                //在这里进行一些图片的操作, 如图片压缩等...

                 console.log(element)

            })

          })

        })

    }.width('100%')

  }

}

//参数 选取图片个数

export function examples(index:number){

  try {

    let photoSelecOptions = new picker.PhotoSelectOptions()

    photoSelecOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE

    photoSelecOptions.maxSelectNumber = index

    let photoPicker = new picker.PhotoViewPicker();

    return photoPicker.select(photoSelecOptions)

  } catch (err) {

    return null

  }

}

//创建上传图片参数class

class updateClass implements request.agent.FormItem

{

  name: string = ''

  value: string | request.agent.FileSpec | request.agent.FileSpec[]

  constructor() {

    this.value = ''

  }

}

//图片上传

/*

*参数1 请求地址

*参数2 需上传的图片

*值得一提的是, 鸿蒙版上传下载方法的底层逻辑是多个请求, 也就是说上传多张图片的时候, 会执行多次接口

*/

export function upLoadImageConfig(urls:string, photoUris: Array<string>){

  let dataArray:Array<request.agent.FormItem> = []

  // 默认参数 根据后台参数需要自行填写

  let tempDic:Record<string, string> = {

    'api':'Harmony',

    'ysApp':'yx_harmony',

    'name':'img',

    'filename':'MyAvatar.jpg',

    'Content-Type':'image/jpeg'

  }

  for (let element of Object.entries(tempDic)) {

    const key = element[0]

    const value = element[1]

    let fromData:updateClass = new updateClass()

    fromData.name = key;

    fromData.value = value;

    dataArray.push(fromData)

  }

  for (let element of Object.entries(photoUris)) {

    let fromData:updateClass = new updateClass()

    fromData.name = 'img'

    let imgData:request.agent.FileSpec = getImageFileSpec(element[1])

    fromData.value = imgData

    dataArray.push(fromData)

  }

  let config:request.agent.Config = {

    action:request.agent.Action.UPLOAD,

    url:urls,

    method:http.RequestMethod.POST,

    data:dataArray, //数据

    headers:{

      'Content-Type': 'multipart/form-data',

    }

}

  let promise = request.agent.create(getContext(), config)

  return promise

}


//参数1:  选取的图片路径地址

function getImageFileSpec(imageuri:string)

{

  let fileSpac:request.agent.FileSpec = {

    path:imageuri,

  }

  return fileSpac

}


新人求关注 您的关注是我更新的动力

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,254评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,875评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,682评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,896评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,015评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,152评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,208评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,962评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,388评论 1 304
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,700评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,867评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,551评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,186评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,901评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,689评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,757评论 2 351

推荐阅读更多精彩内容