【鸿蒙】- HarmonyOS Next中实现图片上传 - ToB企服应用市场:ToB评测及商务社交产业平台

import picker from '@ohos.file.picker';
// 一、定义图片选择 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 })
})

复制代码

"requestPermissions":[
{
"name" : "ohos.permission.INTERNET",
"reason": "$string:reason",
"usedScene": {
"abilities": [
"FormAbility"
],
"when":"inuse"
}
}
]

复制代码

import fs from '@ohos.file.fs';
// 三.将文件保存到缓存目录(只能上传在缓存目录中的文件)
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)

复制代码

import request from '@ohos.request';
import http from '@ohos.net.http';
// 四、上传图片
// 上传文件
let files: Array<request.File> = [
// internal://cache/ 固定的
{ 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) => {
// 根据接口文档转为对应的类型即可
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 '@ohos.file.picker';
import fs from '@ohos.file.fs';
import request from '@ohos.request';
import http from '@ohos.net.http';
// 定义类型
interface UploadResponse {
body: string
}
export interface Response {
/**
* 业务状态码
*/
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 {
@State img :string =''
build() {
Navigation() {
Column() {
Image(this.img)
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: '你的url 地址', // url 地址
method: http.RequestMethod.POST, // 请求方法
header: {
// 和接口文档的要求的格式对象
contentType: 'multipart/form-data',
},
files, // 文件信息
data: [] // 额外提交的数据，不能省略
})
.then((res => {
// 获取响应的内容
res.on('headerReceive', (value) => {
const uploadRes = (value as UploadResponse)
const response = JSON.parse(uploadRes.body) as Response
AlertDialog.show({
message: response.data.url
})
this.img = response.data.url
})
}))
})
})
}
}
.titleMode(NavigationTitleMode.Mini)
.title('上传图片')
}
}

复制代码