# image_opreation

**Repository Path**: ibestservices/image_opreation

## Basic Information

- **Project Name**: image_opreation
- **Description**: image_operation是鸿蒙开发的组件库，支持图片上传、支持拉起相册上传和根据文件id查询上传文件地址
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-02-22
- **Last Updated**: 2024-11-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# image_operation

## 简介

image_operation是鸿蒙开发的组件库，支持图片上传、支持拉起相册上传和根据文件id查询上传文件地址

## 下载安装

`ohpm install @ibestservices/image_operation`

OpenHarmony ohpm 环境配置等更多内容，请参考[如何安装 OpenHarmony ohpm 包](https://gitee.com/openharmony-tpc/docs/blob/master/OpenHarmony_har_usage.md)

## 需要权限
ohos.permission.INTERNET
ohos.permission.READ_MEDIA

## 引入
`import { ImageUtil,FileModel }  from 'ibestservices/image_operation'`  
`import FileModel from '@ibestservices/image_operation/src/main/ets/components/model/FileModel'`  
`import UploadConfigModel from '@ibestservices/image_operation/src/main/ets/components/model/UploadConfigModel'`


## 开源协议
本项目基于 Apache License 2.0，请自由地享受和参与开源。

## 使用组件案例
```html
import { ImageUtil } from '@ibestservices/image_operation'
import FileModel from '@ibestservices/image_operation/src/main/ets/components/model/FileModel';
import UploadConfigModel from '@ibestservices/image_operation/src/main/ets/components/model/UploadConfigModel';
import util from '@ohos.util';
import prompt from '@ohos.prompt';

@Entry
@Component
struct Index {

  /**
   * 图片文件信息
   */
  @State fileModel: FileModel = new FileModel();

  /**
   * 上传配置
   */
  @State uploadConfigModel: UploadConfigModel = new UploadConfigModel();

  /**
   * 上传图片
   */
  async uploadImage() {
    // 获取唯一文件id
    const fileId = util.generateRandomUUID(true)
    // 打开相册选择图片
    this.fileModel = await ImageUtil.selectPicture();
    // 请求上传接口的方式
    this.uploadConfigModel.method = "POST"
    // 上传接口url
    this.uploadConfigModel.uploadUrl = "上传接口地址"
    // 请求头，携带token等信息
    this.uploadConfigModel.header = {
      Authorization: "传token值，根据接口需求是否需要"
    }
    // 接口请求携带数据,默认是form-data
    this.uploadConfigModel.data = [
      {
        name: "fileId", value: fileId
      }
      , {
      name: "functionName", value: "EXPENSE"
    }, {
      name: "moduleName", value: "note"
    }
    ]
    // 上传
    const flag = await ImageUtil.uploadImage(this.fileModel, this.uploadConfigModel)
    // 上传提示
    prompt.showToast({
      message: flag===true?'上传成功':'上传失败',
      duration: 2000
    })
    // 根据上传的文件id获取文件url,这块需要后端在上传接口的时候就需要将fileId跟url绑定，然后调用接口获取

  }

  build() {
    Row() {
      Column() {
        Text('点击下面图片上传').fontSize(20).margin(50)
        // 图片
        Image($r('app.media.1'))
          .width(200)
          .height(100)
          .translate({ x: -40, y: -40 })
          .onClick(() => {
            // 上传图片
            this.uploadImage()
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}
```