一、构建发布页面的布局

新建一个名为 Publish 的页面，页面布局还是一如既往的采用Navigation组件进行整体的布局，这个组件可以给我们用来做页面的整体布局。代码如下：

build() {
  Navigation(){
    TextArea({placeholder:'请输入你要发布的内容',text:this.content}).width('100%')
      .height('40%')
      .margin({ top:10 })
      .padding(10)
      .borderRadius(15)
      .onChange((txt)=>{
        this.content = txt
      })

    Row(){
      Image(this.url)
        .objectFit(ImageFit.Contain)
        .width(60)
        .aspectRatio(1)
        .onClick(()=>{
          this.selectFile()
        })
    }
    .width('100%')
    .height(80)

    Button('发布')
      .width('100%')
      .height(40)
      .margin({top:10})
      .onClick(()=>{
        this.save()
      })

  }
  .title('发布内容')
  .titleMode(NavigationTitleMode.Mini)
  .margin(10)
}

二、完成选择图片的功能

当我们点击图片的功能时，需要先打开手机中的照片列表，选中我们要上传的图片之后，图片先呈现在Image组件中。

这里我们用到了PhotoViewPicker组件，代码如下：

selectFile(){
  try {
    let PhotoSelectOptions = new picker.PhotoSelectOptions();
    PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
    PhotoSelectOptions.maxSelectNumber = 1;
    let photoPicker = new picker.PhotoViewPicker();
    photoPicker.select(PhotoSelectOptions, (err, PhotoSelectResult) => {
      if (err) {
        Prompt.showToast({message:'选择图片的时候发生错误：'+err})
        return;
      }
      this.url = PhotoSelectResult['photoUris'][0]
    });
  } catch (err) {
    Prompt.showToast({message:'选择图片的时候发生错误：'+err})
  }
}

三、上传图片和发布内容

当我们点击发布按钮的时候，首先要上传图片，如果图片上传成功，我们将获取到图片上传后的地址，然后再把发布的内容和图片等信息一起插入到数据表中。

1、上传图片

上传图片非常简单，只需要调用Bmob.uploadImg方法，就可以快速把图片上传到Bmob的文件CDN里面去。代码如下：

Bmob.uploadImg(this.url).then((res)=>{
  //上传成功之后，res.url可以获取到图片的网络地址
})
  .catch((err)=>{
    Prompt.showToast({message:'上传文件错误：'+ err.error})
  })

这里需要注意的是：如果上传不了图片，请检查是否接入了自己备案过的文件二级域名（下图1）或者直接购买文件二级域名（下图2）。

图1

图2

2、发布内容

获取到图片的网络地址之后，我们就可以将内容发布到videos表中了。由于发布的时候需要发布者的头像和昵称信息，我们首先要获取登录用户的这些信息，代码如下：

aboutToAppear(){
  Bmob.User().current().then((res) => {
    this.username = res.realname
    this.avator = res.avator
  })
}

发布内容的代码如下：

let query = Bmob.Query('videos')
  query.set('content',this.content)
  query.set('url',res.url)
  query.set('avator',this.avator)
  query.set('name',this.username)
  query.save().then((res)=>{
    router.pushUrl({url:'pages/Index'})
  })
    .catch((err)=>{
      Prompt.showToast({message:'发布失败：'+ err.error})
    })
})

发布成功之后，我们通过router.pushUrl方法跳到首页中。

四、更多源码

本文涉及到的源码请直接查看：gitee.com/zhang-ming-…

bmob Harmony鸿蒙SDK开发图文内容发布功能