鸿蒙开发实现图片上传（上传用户头像）
应用场景：
1.选择图片
1.1. 添加图片到相册中
默认的相册中无法添加图片：windows 模拟器可以通过截图来添加图片
1.2. 选择相册图片
开发者可以通过系统预置的文件选择器（FilePicker），实现该能力。通过Picker访问相关文件，将拉起对应的应用，引导用户完成界面操作，接口本身无需申请权限。
import picker from **********';
// 一、定义图片选择 Picker 的配置
// 实例化 选项对象
const photoSelectOptions = new picker.PhotoSelectOptions();
// 过滤选择媒体文件类型为IMAGE
photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
// 选择媒体文件的最大数目
photoSelectOptions.maxSelectNumber = 1;
// 二、创建 图片选择对象并选择图片
const photoViewPicker = new picker.PhotoViewPicker();
// 调用 select 方法，传入选项对象
photoViewPicker.select(photoSelectOptions).then(res=>{
const uri = res.photoUris[0]
// 因为只选了一张
AlertDialog.show({ message: '图片路径为:' + uri })
})
2. 拷贝图片到缓存目录
当前上传应用文件功能，仅支持上传应用缓存文件路径（cacheDir）下的文件。
使用上传下载模块，需声明权限：ohos.permission.INTERNET。
使用 fs 模块将上一步的文件，拷贝到 cacheDir 目录下
import fs from **********'; // 三.将文件保存到缓存目录(只能上传在缓存目录中的文件) const context = getContext(this) const fileType = 'jpg' // 生成一个新的文件名 const fileName = Date.now() + '.' + fileType // 通过缓存路径+文件名 拼接出完整的路径 const copyFilePath = context.cacheDir + '/' + fileName // 将文件 拷贝到 临时目录 const file = fs.openSync(uri, fs.OpenMode.READ_ONLY) fs.copyFileSync(file.fd, copyFilePath)
3. 上传文件
最后，根据接口要求咱们组装数据，并提交给服务器即可
import request from **********';
import http from **********';
// 四、上传图片
// 上传文件
let files: Array<request.File> = [
// internal://cache/ 固定的，后面跟上 咱们上一步拷贝文件名即可
// 【name】 和接口文档的要求对上
{ filename: fileName, type: fileType, name: 'img', uri: `internal://cache/${fileName}` }
]
request.uploadFile(context, {
url: '接口地址', // url 地址
method: 请求方法, // 请求方法
header: {
// 和接口文档的要求的格式对象
contentType: '',
},
files, // 文件信息
data: [] // 额外提交的数据，不能省略
})
.then((res => {
// 这里可以获取到响应的内容
res.on('headerReceive', (value) => {
// body 是 JSON 是响应体
// AlertDialog.show({
// message: JSON.stringify(value)
// })
// 根据接口文档 转为对应的类型即可
const uploadRes = (value as UploadResponse)
const response = JSON.parse(uploadRes.body) as Response
AlertDialog.show({
message: response.data.url
})
console.log('上传的地址为:', response.data.url)
})
}))
完整代码展示：
import picker from **********';
import fs from **********';
import request from **********';
import http from **********';
// 定义类型
interface UploadResponse {
body: string
}
export interface Response {
/**
* 业务状态码，10000成功, 其他失败
*/
code: number;
/**
* 响应数据
*/
data: Data;
/**
* 响应消息
*/
message: string;
}
/**
* 响应数据
*/
export interface Data {
/**
* 上传成功的图片-在线地址
*/
url: string;
}
// 实例化 选项对象
const photoSelectOptions = new picker.PhotoSelectOptions();
// 过滤选择媒体文件类型为IMAGE
photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
// 选择媒体文件的最大数目
photoSelectOptions.maxSelectNumber = 1;
@Entry
@Component
struct Page03_uploadImg {
build() {
Navigation() {
Column() {
Image('http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/ajax/17128585871360.5802423440443907.jpg')
Button('选择并上传图片')
.onClick(() => {
// 创建 图片选择对象
const photoViewPicker = new picker.PhotoViewPicker();
// 调用 select 方法，传入选项对象
photoViewPicker.select(photoSelectOptions)
.then(res => {
const uri = res.photoUris[0]
// 因为只选了一张
// AlertDialog.show({ message: '图片路径为:' + uri })
// 三、拷贝文件到缓存目录
// 将文件保存到缓存目录(只能上传在缓存目录中的文件)
const context = getContext(this)
const fileType = 'jpg'
// 生成一个新的文件名
const fileName = Date.now() + '.' + fileType
// 通过缓存路径+文件名 拼接出完整的路径
const copyFilePath = context.cacheDir + '/' + fileName
// 将文件 拷贝到 临时目录
const file = fs.openSync(uri, fs.OpenMode.READ_ONLY)
fs.copyFileSync(file.fd, copyFilePath)
// 四、上传图片
// 上传文件
let files: Array<request.File> = [
// internal://cache/ 固定的，后面跟上 咱们上一步拷贝文件名即可
// name 和接口文档的要求对上
{ filename: fileName, type: fileType, name: 'img', uri: `internal://cache/${fileName}` }
]
request.uploadFile(context, {
url: 'https://hmajax.itheima.net/api/uploadimg', // url 地址
method: http.RequestMethod.POST, // 请求方法
header: {
// 和接口文档的要求的格式对象
contentType: 'multipart/form-data',
},
files, // 文件信息
data: [] // 额外提交的数据，不能省略
})
.then((res => {
// 这里可以获取到响应的内容
res.on('headerReceive', (value) => {
// body 是 JSON
// AlertDialog.show({
// message: JSON.stringify(value)
// })
const uploadRes = (value as UploadResponse)
const response = JSON.parse(uploadRes.body) as Response
AlertDialog.show({
message: response.data.url
})
console.log('上传的地址为:', response.data.url)
})
}))
})
})
}
}
.titleMode(NavigationTitleMode.Mini)
.title('上传图片')
}
}
#开发##鸿蒙##社交游戏的核心##DevEcoStudio##harmonyos#
