# file_operation

**Repository Path**: ibestservices/file_operation

## Basic Information

- **Project Name**: file_operation
- **Description**: file_operation是鸿蒙开发的组件库，支持图片上传、支持拉起图库进行图片视频上传；支持文件上传、支持拉起文件管理进行文件上传；根据文件id查询上传文件地址进行渲染

- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2024-02-27
- **Last Updated**: 2025-03-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# file_operation

## 简介

file_operation是鸿蒙开发的组件库，支持图片上传、支持拉起图库进行图片视频上传；支持文件上传、支持拉起文件管理进行文件上传；根据文件url地址下载文件到真机上

## 下载安装

`ohpm install @ibestservices/file_operation`

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

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

## 权限配置
1、配置在module.json5文件中  
```html
{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "mainElement": "EntryAbility",
    "deviceTypes": [
      "phone",
      "tablet"
    ],
    "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      },
      {
        "name": "ohos.permission.READ_MEDIA"
      },
      {
        "name": "ohos.permission.WRITE_MEDIA"
      }
    ],
    "deliveryWithInstall": true,
    "installationFree": false,
    "pages": "$profile:main_pages",
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ts",
        "description": "$string:EntryAbility_desc",
        "icon": "$media:icon",
        "label": "$string:EntryAbility_label",
        "startWindowIcon": "$media:icon",
        "startWindowBackground": "$color:start_window_background",
        "exported": true,
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "action.system.home"
            ]
          }
        ]
      }
    ]
  }
}
```

## 引入
`import { FileUtil } from '@ibestservices/file_operation'`  
`import FileModel from '@ibestservices/file_operation/src/main/ets/components/model/FileModel'`  
`import UploadConfigModel from '@ibestservices/file_operation/src/main/ets/components/model/UploadConfigModel'`


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

## 使用组件案例
```html
import { FileUtil } from '@ibestservices/file_operation'
import FileModel from '@ibestservices/file_operation/src/main/ets/components/model/FileModel';
import UploadConfigModel from '@ibestservices/file_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 FileUtil.selectPicture();
// 请求上传接口的方式
this.uploadConfigModel.method = "接口请求方式"
// 上传接口url
this.uploadConfigModel.uploadUrl = "接口url"
// 请求头，携带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 FileUtil.uploadFile(this.fileModel, this.uploadConfigModel)
// 上传提示
prompt.showToast({
message: flag === true ? '上传成功' : '上传失败',
duration: 2000
})
// 根据上传的文件id获取文件url,这块需要后端在上传接口的时候就需要将fileId跟url绑定，然后调用接口获取
}

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

/**
* 上传文件
*/
async uploadFile() {
// 获取唯一文件id
const fileId = util.generateRandomUUID(true)
// 选择文件
this.fileModel = await FileUtil.selectFile();
// 请求上传接口的方式
this.uploadConfigModel.method = "POST"
// 上传接口url
this.uploadConfigModel.uploadUrl = "http://qxbuat.ibestservices.com/file_api/file/fileUrl/upload"
// 请求头，携带token等信息,根据自己业务来判断是否需要
this.uploadConfigModel.header = {
"Authorization": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX25hbWUiOiJoZmZhbiIsImdyb3VwSWQiOm51bGwsImRlcHRJZCI6NjA0LCJyb2xlQ29kZXMiOlsiZGFnbHkiLCJzd3p5IiwiQkRfSlNfMjAyMjEyMjMwMDIiLCJCRF9KU18yMDIzMDExNTAwMSIsImhyYnAiLCJCRF9KU18yMDIzMDMxNjAwMSIsInJwb196cHp5IiwicnNqbGwiLCJCRF9KU18yMDIzMDEzMTAwMSIsInpwenoiLCJCRF9KU18yMDIyMDkwMjAwNSIsIkJEX0pTXzIwMjIwOTI5MDA0IiwicmxqZWtwenkiLCJCRF9KU18yMDIyMDkyOTAwMiIsIkJEX0pTXzIwMjMwMzA3MDAxIiwic2d6eSIsIkJEX0pTXzIwMjIxMjIzMDAxIiwiamZ6eSIsIkJEX0pTXzIwMjIwNTI0MDA1Il0sInVzZXJJZCI6NjIzNSwiYXV0aG9yaXRpZXMiOlsiUk9MRV9yc2psbCIsIlJPTEVfQkRfSlNfMjAyMzAxMzEwMDEiLCJST0xFX3JsamVrcHp5IiwiUk9MRV9qZnp5IiwiUk9MRV96cHp6IiwiUk9MRV9zZ3p5IiwiUk9MRV9CRF9KU18yMDIyMTIyMzAwMSIsIlJPTEVfaHJicCIsIlJPTEVfQkRfSlNfMjAyMzAzMTYwMDEiLCJST0xFX3Jwb196cHp5IiwiUk9MRV9CRF9KU18yMDIyMDUyNDAwNSIsIlJPTEVfQkRfSlNfMjAyMjEyMjMwMDIiLCJST0xFX0JEX0pTXzIwMjIwOTI5MDAyIiwiUk9MRV9CRF9KU18yMDIyMDkyOTAwNCIsIlJPTEVfQkRfSlNfMjAyMzAxMTUwMDEiLCJST0xFX0JEX0pTXzIwMjIwOTAyMDA1IiwiUk9MRV9kYWdseSIsIlBFUlNPTl8yMDIyMDExODciLCJST0xFX3N3enkiLCJST0xFX0JEX0pTXzIwMjMwMzA3MDAxIl0sIm9yZ0lkIjo2MDQsImNsaWVudF9pZCI6Im15anN6bCIsInJlYWxOYW1lIjoi6IyD57qi5bOwIiwiYXVkIjpbInJlczEiXSwicm9sZUlkcyI6WzMwNCwzMDUsMTk3LDMwMiw3LDMwOCwzMTMsMTc0LDMxNCwxNiwxOTEsMTk1LDMxNSwxOTMsMzA2LDYsMTk2LDUsMTUyXSwidXNlcl9jb2RlIjoiMjAyMjAxMTg3Iiwic2NvcGUiOlsiYWxsIl0sImNvbUlkIjowLCJleHAiOjE3MDg4NDY2NzksImp0aSI6IjFjZGE5MTFjLTNlMTYtNDVhNC1hYWZiLWI1MTViYjE3YTEwYiJ9.WJF8-U4X39gB-psvisdQwE8rw9OxikNCW9f3e36ih_E"
}
// 接口请求携带数据,默认是form-data,根据自己业务来判断是否需要
this.uploadConfigModel.data = [
{
name: "fileId", value: fileId
}
, {
name: "functionName", value: "ZMCLKJ_SERVICE"
}, {
name: "moduleName", value: "FINANCE"
}
]
// 上传
const flag = await FileUtil.uploadFile(this.fileModel, this.uploadConfigModel)
// 上传提示
prompt.showToast({
message: flag === true ? '上传成功' : '上传失败',
duration: 2000
})
// 根据上传的文件id获取文件url,这块需要后端在上传接口的时候就需要将fileId跟url绑定，然后调用接口获取
}

/**
* 下载文件
*/
async downloadFile() {
// 调用下载文件api,文件名跟后缀根据实际下载的文件获取
const flag = await FileUtil.downloadFile('下载的文件名', '文件后缀类型', '文件下载地址url')
prompt.showToast({
message: flag === true ? '下载完成，请根据刚保存文件路径打开文件管理查看下载文件' : '下载失败',
duration: 2000
})
}

build() {
Row() {
Column() {
Button('第一种上传图片api', { stateEffect: true })
.backgroundColor('#406EFF')
.fontColor('#fff')
.width('80%')
.height(40)
.margin({ top: 40, bottom: 20 })
.onClick(() => {
this.uploadImage()
})

Button('第二种上传图片api', { stateEffect: true })
.backgroundColor('#406EFF')
.fontColor('#fff')
.width('80%')
.height(40)
.margin({ top: 40, bottom: 20 })
.onClick(() => {
this.uploadImageNew()
})

Button('上传文件', { stateEffect: true })
.backgroundColor('#406EFF')
.fontColor('#fff')
.width('80%')
.height(40)
.margin({ top: 40, bottom: 20 })
.onClick(() => {
this.uploadFile()
})

Button('下载文件', { stateEffect: true })
.backgroundColor('#406EFF')
.fontColor('#fff')
.width('80%')
.height(40)
.margin({ top: 40, bottom: 20 })
.onClick(() => {
this.downloadFile()
})
}
.width('100%')
}
.height('100%')
}
}
```
## api详解  
### FileUtil.selectPicture()  
作用:打开手机相册选择图片，然后返回一个FileModel对象,对象里面是选择的图片信息  
### FileUtil.selectFile()
作用:打开文件管理选择文件，然后返回一个FileModel对象,对象里面是选择的文件信息  
### FileUtil.uploadFile(this.fileModel, this.uploadConfigModel)  
作用:上传图片、文件等，上传配置uploadConfigModel需要自己手动构建在代码中    
### FileUtil.uploadFileNew(this.fileModel, data )  
作用:上传图片、文件等，上传配置uploadConfigModel只需要在rawfile目录下面建立一个config.json配置文件即可，配置文件里面有以下参数      
```html
{
  "method": "POST",
  "uploadUrl": "上传接口url",
  "header": {
    "Authorization": "token"
  }
}
```
我们只需要构建表单入参data就好，如果自身上传接口不需要表单参数可以传空  

### FileUtil.downloadFile(fileName: string, fileSuffix: string, uploadUrl: string)
作用:根据url下载文件到真机

## 仓库地址
`https://gitee.com/ibestservices/file_operation.git`