鸿蒙next开发实战：基于file_operation组件库图库工具

本文链接：https://blog.csdn.net/maniu110/article/details/140294657

简介

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

下载安装

ohpm install @ibestservices/file_operation

需要权限

ohos.permission.INTERNET ohos.permission.READ_MEDIA ohos.permission.WRITE_MEDIA

权限配置

1、配置在module.json5文件中

{
  "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"
            ]
          }
        ]
      }
    ]
  }
}

点击领取→纯血版全套鸿蒙HarmonyOS学习资料（安全链接，放心点击）希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取~
引入

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，请自由地享受和参与开源。

使用组件案例

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配置文件即可，配置文件里面有以下参数

{
  "method": "POST",
  "uploadUrl": "上传接口url",
  "header": {
    "Authorization": "token"
  }
}

我们只需要构建表单入参data就好，如果自身上传接口不需要表单参数可以传空

FileUtil.downloadFile(fileName: string, fileSuffix: string, uploadUrl: string)

作用:根据url下载文件到真机

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？但是又不知道从哪里下手，而且学习时频繁踩坑，最终浪费大量时间。所以本人整理了一些比较合适的鸿蒙（HarmonyOS NEXT）学习路径和一些资料的整理供小伙伴学习

点击领取→纯血鸿蒙Next全套最新学习资料希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取~~

一、鸿蒙（HarmonyOS NEXT）最新学习路线

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）…等技术知识点。

获取以上完整版高清，请点击→纯血版全套鸿蒙HarmonyOS学习资料

二、HarmonyOS Next 最新全套视频教程