HarmonyOS开发：file_operation图库工具_鸿蒙downloadfile()下载到图库

作者：寸_铁 | 2024-08-13 22:39:06

踩

鸿蒙downloadfile()下载到图库

简介

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）资料用来跟着学习是非常有必要的。

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

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、（南向驱动、嵌入式等）鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

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