上传图片 HarmonyOS 鸿蒙Next
上传图片 HarmonyOS 鸿蒙Next
import picker from '@ohos.file.picker';
import fs from '@ohos.file.fs';
import { common } from '@kit.AbilityKit';
import request from '@ohos.request';
// 使用装饰器定义页面组件
@Entry
@Component
struct Index {
@State imageList: Array<string> = []
// 状态变量:原始图片的URI
@State imgOriginal: string = '';
@State filePath: string = '';
uploadFileName: string = '';
// 弹出图片选择器方法
async openPicker() {
try {
// 设置图片选择器选项
const photoSelectOptions = new picker.PhotoSelectOptions();
// 限制只能选择一张图片
photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
photoSelectOptions.maxSelectNumber = 10;
// 创建并实例化图片选择器
const photoViewPicker = new picker.PhotoViewPicker();
// 选择图片并获取图片URI
let uris: picker.PhotoSelectResult = await photoViewPicker.select(photoSelectOptions);
if (!uris || uris.photoUris.length === 0) return;
console.info('123123uris', JSON.stringify(uris))
this.imageList = uris.photoUris
// 获取选中图片的第一张URI
let uri: string = uris.photoUris[0];
// 更新状态变量:保存原始图片的URI
this.imgOriginal = uri;
// uris.photoUris.forEach(item =>{
// 打开文件读取流
let file = fs.openSync(uri, fs.OpenMode.READ_ONLY);
// 获取当前上下文
let context = getContext(this) as common.UIAbilityContext;
// 新建一个保存裁剪后图片的路径
this.uploadFileName = new Date().getTime() + '.jpg';
this.filePath = context.cacheDir + '/' + this.uploadFileName;
// 复制图片到新的路径
fs.copyFileSync(file.fd, this.filePath);
// 关闭文件读取流
fs.closeSync(file);
console.info('123123filePath', JSON.stringify(this.filePath))
// })
} catch (e) {
console.error('openPicker', JSON.stringify(e));
}
}
//标准记事,资质证明文件,门到站站到门,运输信息(集装箱,整车)
upPicker() {
let uploadConfig: request.UploadConfig = {
url: 'http://10.255.11.12:7000/api/gxzx/file/uploadFile',
header: {
'Accept': '*/*',
'Content-Type': 'multipart/form-data',
},
method: 'POST',
files: [
{ filename: 'test', name: 'file', uri: `internal://cache/${this.uploadFileName}`, type: 'jpg' }
],
data: []
}
console.log('uploadConfig', JSON.stringify(uploadConfig))
try {
request.uploadFile(getContext(), uploadConfig).then((data: request.UploadTask) => {
console.log('123123', JSON.stringify(data))
let uploadTask = data
let upCompleteCallback = (taskStates:Array<request.TaskState>) =>{
for (let index = 0; index < taskStates.length; index++) {
console.info('upCompleteCallback',JSON.stringify(taskStates[index]))
}
}
uploadTask.on('complete',upCompleteCallback)
let upFailCallback = (taskStates:Array<request.TaskState>) =>{
for (let index = 0; index < taskStates.length; index++) {
console.info('upFailCallback',JSON.stringify(taskStates[index]))
}
}
uploadTask.on('fail',upFailCallback)
})
} catch (err) {
console.log('987err', JSON.stringify(err))
}
}
// 构建UI界面
build() {
Column() {
// 添加选择图片按钮,点击后调用打开图片选择器方法
Button('选择图片→').onClick(() => {
this.openPicker();
});
Image(this.imgOriginal)
.width('100%')
.objectFit(ImageFit.Contain);
Button('上传图片').onClick(() => {
this.upPicker();
});
}
.width('100%');
}
}
uri: internal://cache/${this.uploadFileName}
, type: ‘jpg’
header: { ‘Accept’: ‘/’, ‘Content-Type’: ‘multipart/form-data’, },这块换成这样的
更多关于上传图片 HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
针对您提到的“上传图片到HarmonyOS 鸿蒙Next”的问题,这里提供一些可能的解决方案概述,旨在帮助您理解基本操作步骤及潜在的问题解决方向:
-
检查应用权限:确保您的应用已授予访问存储和相机(如果涉及拍照上传)的权限。在鸿蒙系统中,这些权限通常在应用的“设置”或系统的“权限管理”中管理。
-
使用官方API:如果您是开发者,利用鸿蒙系统提供的MediaStore API或相关文件操作API来实现图片上传功能,确保代码符合鸿蒙系统的开发规范。
-
文件格式与大小限制:检查上传平台对图片格式(如JPEG, PNG)和文件大小是否有特定要求,确保图片符合这些标准。
-
网络状态:确认设备网络连接稳定,上传图片需要良好的网络条件。
-
系统更新:确保您的鸿蒙系统为最新版本,有时系统更新能解决兼容性问题。
-
错误日志分析:如果上传失败,查看应用或系统的错误日志,可能会提供失败原因的线索。
如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html 。希望这些信息对您有所帮助!