HarmonyOS 鸿蒙Next 图片选择上传组件需求
HarmonyOS 鸿蒙Next 图片选择上传组件需求
APP需要上传一张（或多张）用户的图片。有两种方式：从手机相册选择、拍照。 然后把图片上传到服务器，上传成功，服务器会返回图片的相关信息，上传失败，APP提示失败信息。
3 回复
拍照上传可参考下面demo
相册选择多文件上传您可参考该连接：https://gitee.com/harmonyos_samples/upload-and-down-load
Button("拍照并上传")
.onClick( async () =>{
// let mContext = getContext(this) as common.Context;
const name = Date.now().toString()
try {
let pickerProfile: picker.PickerProfile = {
cameraPosition: camera.CameraPosition.CAMERA_POSITION_BACK
};
let pickerResult: picker.PickerResult = await picker.pick(this.context,
[picker.PickerMediaType.PHOTO], pickerProfile);
if (!pickerResult) {
console.log("the pick pickerResult is undefined");
}
//将文件上传至沙箱 （即传入的context）对应的缓存路径context.cacheDir。
console.log("the pick pickerResult is:" + JSON.stringify(pickerResult));
let sha = fs.openSync(`${this.context.cacheDir}/${name}.jpg`,fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE)
let photos = fs.openSync(pickerResult.resultUri,fs.OpenMode.READ_ONLY | fs.OpenMode.CREATE)
fs.copyFileSync(photos.fd,sha.fd)
let formData = new FormData()
formData.append('file', `internal://cache/${name}.jpg`)
// 发送请求
axios.post<string, AxiosResponse<string>, FormData>('https://www.xxx.com/upload', formData, {
headers: { 'Content-Type': 'multipart/form-data' },
context: getContext(this),
onUploadProgress: (progressEvent: AxiosProgressEvent): void => {
console.info(progressEvent && progressEvent.loaded && progressEvent.total ? Math.ceil(progressEvent.loaded / progressEvent.total * 100) + '%' : '0%');
},
}).then((res: AxiosResponse<string>) => {
console.info("result" + JSON.stringify(res.data));
}).catch((err: AxiosError) => {
console.error("error:" + JSON.stringify(err));
})
} catch (error) {
let err = error as BusinessError;
console.error(`the pick call failed. error code: ${err.code}`);
}
})更多关于HarmonyOS 鸿蒙Next 图片选择上传组件需求的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
基本如下：
request.uploadFile 可换为正常http或axios请求
.onClick(async () => {
// 选择头像并上传this.pickerAvatar()
let options = new photoAccessHelper.PhotoSelectOptions()
options.maxSelectNumber = 1
options.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE
<span class="hljs-keyword">let</span> picker = <span class="hljs-keyword">new</span> photoAccessHelper.PhotoViewPicker()
<span class="hljs-keyword">let</span> result = await picker.select(options)
<span class="hljs-keyword">let</span> selImg = result.photoUris[<span class="hljs-number">0</span>] <span class="hljs-comment">// 获取照片</span>
<span class="hljs-keyword">if</span> (!selImg) {
promptAction.showToast({ message: <span class="hljs-string">'未选择图片'</span> })
<span class="hljs-keyword">return</span>
}
<span class="hljs-comment">// 拷贝文件</span>
<span class="hljs-keyword">let</span> cacheDir = getContext().cacheDir
<span class="hljs-keyword">let</span> fileName = <span class="hljs-built_in">Date</span>.now().toString()
<span class="hljs-keyword">let</span> fileType = <span class="hljs-string">'jpg'</span>
<span class="hljs-comment">// let originImg = await fileIo.open(selImg)</span>
<span class="hljs-comment">// await fileIo.copyFile(originImg.fd, `${cacheDir}/${fileName}.${fileType}`)</span>
<span class="hljs-comment">//——————————————————————————图片压缩并打包——————————————————————————</span>
<span class="hljs-comment">// 获取到需要打包的图片</span>
<span class="hljs-keyword">let</span> originImg = await fileIo.open(selImg) <span class="hljs-comment">// 打开照片</span>
<span class="hljs-comment">// 因为打包实例需要的图片格式为ImageSource，所以需要先将图片转为ImageSource</span>
<span class="hljs-keyword">let</span> source = image.createImageSource(originImg.fd) <span class="hljs-comment">// 创建一个图片实例</span>
<span class="hljs-comment">// 创建一个图片打包器实例</span>
<span class="hljs-keyword">let</span> packer = image.createImagePacker() <span class="hljs-comment">// 创建一个图片打包器实例</span>
<span class="hljs-comment">// 压缩打包图片</span>
<span class="hljs-keyword">let</span> arrayBuffer = await packer.packing(source, { quality: <span class="hljs-number">10</span>, format: <span class="hljs-string">'image/jpeg'</span> }) <span class="hljs-comment">// 压缩打包图片</span>
<span class="hljs-comment">// 创建一个文件实例</span>
<span class="hljs-keyword">let</span> newFile = fileIo.openSync(cacheDir + <span class="hljs-string">'/'</span> + fileName + <span class="hljs-string">'.'</span> + fileType,
fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE) <span class="hljs-comment">// 打开文件并给予权限</span>
<span class="hljs-comment">// 将图片的二进制数据流写入文件</span>
fileIo.writeSync(newFile.fd, arrayBuffer) <span class="hljs-comment">// 写入文件</span>
<span class="hljs-comment">//——————————————————————————图片压缩并打包——————————————————————————</span>
<span class="hljs-keyword">let</span> task = await request.uploadFile(getContext(), {
<span class="hljs-comment">// 服务器地址 完整</span>
url: <span class="hljs-string">'https://api-harmony-teach.itheima.net/hm/userInfo/avatar'</span>,
<span class="hljs-comment">// 请求方法</span>
method: http.RequestMethod.POST,
<span class="hljs-comment">// 图片</span>
files: [
{
filename: fileName + <span class="hljs-string">'.'</span> + fileType,
type: fileType,
uri: <span class="hljs-string">'internal://cache/'</span> + fileName + <span class="hljs-string">'.'</span> + fileType, <span class="hljs-comment">//</span>
name: <span class="hljs-string">'file'</span>
}
],
<span class="hljs-comment">// 请求头 contentType: application/json</span>
header: {
<span class="hljs-string">'Content-Type'</span>: <span class="hljs-string">'multipart/form-data'</span>, <span class="hljs-comment">// 这次传的是文件 文件的类型multipart/form-data</span>
<span class="hljs-comment">// 身份</span>
Authorization: <span class="hljs-string">'Bearer '</span> + AppStorage.get<LoginData>(<span class="hljs-string">'userInfo'</span>)?.token
},
<span class="hljs-comment">// 额外参数 data</span>
data: []
})</code><button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button></pre></div></div>
针对HarmonyOS 鸿蒙Next图片选择上传组件的需求，以下是一些专业解答：
在HarmonyOS 鸿蒙Next中，图片选择上传组件可以通过系统提供的API实现。首先，使用picker.PhotoViewPicker来选择图片，可以支持从相册选择或拍照获取。在选择图片时，可以通过设置PhotoSelectOptions来指定选择类型、数量等参数。
获取到图片的URI后，由于该URI通常不能直接用于上传，因此需要将其转换为适合上传的格式。这通常涉及将图片拷贝到应用的沙箱目录中，并对其进行必要的处理，如压缩、裁剪等，以适应上传需求。
最后，使用网络请求库构建HTTP POST请求，将处理后的图片数据作为MultipartFile或Base64编码的字符串包含在请求体中，发送到服务端。在发送请求时，需要确保使用HTTPS协议，并对敏感信息进行加密，以保证上传过程的安全性。
如果在实现过程中遇到问题，建议查阅HarmonyOS官方文档或开发者社区的相关资源。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。
![点击内容或者外部自动关闭图片预览]()
回到顶部
