鸿蒙开发之图片选择器_鸿蒙开发js上传图片

一、使用

系统的图片选择器真的非常友好，这个绝对要赞一下。

pickPhotos() {
//初始化一个photopicker
let photoPicker = new picker.PhotoViewPicker()
   
//maxSelectNumber最多选择多少张（默认值为50，最大值为500）
//MIMEType 选择文件的类型
photoPicker.select({maxSelectNumber:9,MIMEType:picker.PhotoViewMIMETypes.IMAGE_TYPE}).then(val => {
      //通过val.photoUris就可以拿到图片的Uri数组了
      //val.photoUris
      
    }).catch(err => {
      Prompt.showToast({message:'获取图片失败'})
    })
 
  }

二、实现图片删除

长按图片，给图片添加一个抖动的动画。这里借助了z轴旋转动画实现。

import picker from '@ohos.file.picker'
import Prompt from '@system.prompt'
 
/*
 * 开发中动画实现上遇到一个问题不能停止动画的问题
 * 一开始想的是直接操作旋转的角度和z轴的值，但是发现有些gridItem不生效还会动
 * 群友提供了一个思路：
 * 在动画finish回调中不断的重置旋转的角度和z轴的值达到开启关闭动画
 * */
@Entry
@Component
struct OfficialPhotoPickPage2 {
 
  @State imageUris: string[] = ["https://tse1-mm.cn.bing.net/th/id/OIP-C.LWCXuZysYTsReGHGVjKBvAAAAA?w=211&h=211&c=7&r=0&o=5&dpr=1.9&pid=1.7"
  ,"https://tse3-mm.cn.bing.net/th/id/OIP-C.mmUrUJJ8RtIXNpFFU1XqsgAAAA?w=211&h=211&c=7&r=0&o=5&dpr=1.9&pid=1.7"
  ,"https://c-ssl.dtstatic.com/uploads/blog/202307/03/9WSX9PPas8AzV3V.thumb.400_0.jpeg"
  ,'https://tse2-mm.cn.bing.net/th/id/OIP-C.V7iv7AMzhwagJ3oyhiHvnAAAAA?w=210&h=210&c=7&r=0&o=5&dpr=1.9&pid=1.7']
  stroller: Scroller = new Scroller()
    //监听该属性来动态改变grid的高度
  @State gridHeight: number = 200
    //监听操作按钮显示与否设置动画属性
  @State showDelBtn: boolean = false
    //angle不断改变值来达到动画的停止与启用
  @State angle: number = 0
    //设置动画z轴值
  @State imageRotate: number = 0
 
//抖动动画
  startAnim(){
    animateTo({
      duration:100,
      curve:Curve.EaseInOut,
      iterations:1,
      playMode:PlayMode.Alternate,
      onFinish:()=>{//在结束的时候通过按钮显示与否改变动画属性
        if( this.showDelBtn ){
          this.angle = this.angle === 0 ? 5 : 0
          this.imageRotate = this.imageRotate === 0 ? 1 : 0;
          this.startAnim();
        }
      }
    },()=>{
    })
  }
 
 
  build() {
    Column() {
      Grid() {
        ForEach(this.imageUris,(item,index) => {
          GridItem() {
            Stack() {
              Image(item)
                .borderWidth(3)
                .borderRadius(20)
                .width(100)
                .height(100)
                .margin({top:20})
                .rotate({
                  z:this.imageRotate,
                  angle:this.angle
                })
 
              Button(){
                //warning '这里记得替换成关闭图片'
                Image($rawfile('guanbi.png'))
                  .width(20)
                  .height(20)
              }
              .fontColor(Color.White)
              .fontSize(15)
              .width(this.showDelBtn ? 20 : 0)
              .height(this.showDelBtn ? 20 : 0)
              .margin({top:15,right:0,left:80})
              .onClick(() => {
                //删除某个图片，并关闭动画
                this.showDelBtn = false
                this.imageUris.splice(index,1)
                this.gridHeight = ((this.imageUris.length/3)+(this.imageUris.length%3>0?1:0))*130
                this.angle = 0
                this.imageRotate = 0
              })
            }
            .alignContent(Alignment.TopEnd)
          }
          .gesture(LongPressGesture({repeat:true}).onAction(() => {
            //长按显示按钮，并开始抖动动画
            this.showDelBtn = true
            this.angle = 5
            this.imageRotate = 1
            this.startAnim();
          }))
        })
      }
      .columnsGap(10)
      .rowsGap(10)
      .width('90%')
      .backgroundColor(Color.Gray)
      .margin({top:20})
 
      Button('请选择图片')
        .type(ButtonType.Capsule)
        .width(150)
        .height(40)
        .margin({top:30})
        .onClick(() => {
          this.pickPhotos()
        })
    }
    .width('100%')
    .height('100%')
  }
 
//图片选择
  pickPhotos() {
    let photoPicker = new picker.PhotoViewPicker()
       photoPicker.select({maxSelectNumber:9,MIMEType:picker.PhotoViewMIMETypes.IMAGE_TYPE}).then(val => {
        //现有数据与选择的数据拼接
      this.imageUris = [...this.imageUris,...val.photoUris]
        //更新grid的高度
      this.gridHeight = ((this.imageUris.length/3)+(this.imageUris.length%3>0?1:0))*100
    }).catch(err => {
      Prompt.showToast({message:'获取图片失败'})
    })
 
  }
}