实现在鸿蒙中上传图片到服务器

大雾.

已于 2024-09-24 16:30:04 修改

阅读量106

点赞数 2

文章标签： harmonyos 华为

于 2024-09-24 16:24:34 首次发布

本文链接：https://blog.csdn.net/qq_56203716/article/details/142493174

版权

封装图片上传函数（post请求已经进行两次封装）

//选择图片 并上传到后端
export function uploadFile(context:common.UIAbilityContext,cb:(str:string)=>void){
  let mypicker=new picker.DocumentViewPicker //文件选择
  //选择文件
  mypicker.select({

  }).then(res=>{
    //res是一个数组，这个数组包含了我们选择文件的路径信息
    //此处会涉及系统文件权限问题
    //系统文件可以分为以下几类
    //系统文件
    //用户文件
    //app文件
    //文件安全沙箱我们需要把对应的文件进行一些处理后，存放在可以被app访问的位置进行操作
    //文件上传
    //   我们使用rcp传递一个formdata数据
    //把用户的文件存储在app的临时目录中
    //需要先获取临时目录
    let context=getContext()
    //我的目标地址
    const file=fs.openSync(res[0]) //需要打开选择的文件
    //每一个file都有一个fd属性，这个是文件唯一值，我们以后操作文件的化可以使用这个fd
    const destPath=context.cacheDir+"/0d61fcf2d2f4e1102d4509e0a280b94.jpg" //
    fs.copyFileSync(file.fd,destPath)//文件复制
    const session=rcp.createSession()
    const formData=new rcp.MultipartForm({
      "file":{
        contentType:'image/png',//文件类型，设置文件为图片
        contentOrPath:destPath //地址或者内容
      }
    })
    // 调用接口发送上传的数据
    session.post(baseUrl+"/api/v1/common/upload_file",formData)
      .then((res)=>{
        console.log("文件上传成功")
        const data=res.toJSON()!["data"] as string
        console.log(JSON.stringify(res.toJSON())+'')
        // 该回调是将数据通过回调返回出来
        cb(data)
      })

  })

}

使用例子

Button("选择文件")
        .onClick(()=>{
          let context=getContext() as common.UIAbilityContext
          //调用文件上传服务
           uploadFile(context,(str)=>{
               this.imgSrc=dalImg(str) as string
           })
        })