HarmonyOS 鸿蒙Next 怎样用axios上传相册中的图片

发布于 1周前 作者 caililin 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 怎样用axios上传相册中的图片 我用fileSelect()已经选择到了图片文件路径为file://media/Photo/1/IMG_1731313210_000/screenshot_20241111_161830.jpg，但是用axios提交这个图片地址上传的时候显示

error:{"message":"Failed to open/read local data from file/application","name":"AxiosError","stack":"，如果上传的是沙箱中的地址则没问题，相册中的地址就不行，好像是没有权限取出？

//选择图片
async fileSelect() {
    try {
        // 设置图片选择器选项
        const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
        // 限制只能选择一张图片
        photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
        photoSelectOptions.maxSelectNumber = 1;
        // 创建并实例化图片选择器
        const photoViewPicker = new photoAccessHelper.PhotoViewPicker();
        // 选择图片并获取图片URI
        let uris: photoAccessHelper.PhotoSelectResult = await photoViewPicker.select(photoSelectOptions);
        if (!uris || uris.photoUris.length === 0) return;
        // 获取选中图片的第一张URI
        let uri: string = uris.photoUris[0];
        console.log(uri.toString())
        this.img=uri;
    } catch (e) {
        console.error('openPicker', JSON.stringify(e));
    }
}

//上传图片
upload(){
    let formData = new FormData()
    formData.append('img', 'internal://cache/'+this.img)
    axios.post<string, AxiosResponse<string>, FormData>(Global.SERVER+'/getfankui.aspx?type=1'+ Global.OtherURL, 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));
    })
}

更多关于HarmonyOS 鸿蒙Next 怎样用axios上传相册中的图片的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
5 回复

可以将select获取到的文件通过复制转换为沙箱路径，再上传即可，示例如下

import fs from '@ohos.file.fs';
import photoAccessHelper from '@ohos.file.photoAccessHelper';

@Entry
@Component
export struct Index {
  picture() {
    let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
    PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
    PhotoSelectOptions.maxSelectNumber = 1;
    let photoPicker = new photoAccessHelper.PhotoViewPicker();
    photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult: photoAccessHelper.PhotoSelectResult) => {
      let photouri: Array<string> = PhotoSelectResult.photoUris
      let file = fs.openSync(photouri[0], fs.OpenMode.READ_ONLY)
      let pathDir = getContext().filesDir;
      let file2 = fs.openSync(pathDir + '/picture2.jpg', fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE)
      fs.copyFileSync(file.fd, file2.fd)//先创建有读写权限的文件，再把不可读写的文件复制过来
      //通过沙箱路径文件file2上传

      fs.closeSync(file);
      fs.closeSync(file2);
    })
  }

  build() {
    Column() {
      Button('选择图片').onClick(() => {
        this.picture()
      })
    }
  }
}

更多关于HarmonyOS 鸿蒙Next 怎样用axios上传相册中的图片的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


兄嘚
你是把这个file2转成ArrayBuffer或者uri再上传的吗
还有点不太清楚咋回事都，

还需要申请读取写入的权限吗，

相册的图片先存到沙盒，再去上传

在HarmonyOS鸿蒙Next系统中，若要使用axios上传相册中的图片，你需要先确保你的应用拥有访问相册的权限，并且能够选择并获取图片文件的路径。接下来，你可以通过以下步骤实现图片的上传：

  1. 获取图片文件：使用HarmonyOS的文件选择器API让用户从相册中选择图片，并获取其文件路径。

  2. 读取图片文件：利用HarmonyOS的文件读取API，将图片文件转换为Base64编码或直接读取为二进制数据。

  3. 使用axios上传：配置axios请求，将图片数据作为请求体的一部分发送至服务器。这通常涉及设置正确的Content-Type（如multipart/form-data）并在请求体中附加图片数据。

  4. 处理响应：服务器接收到图片后，会返回相应的响应。在你的应用中处理这个响应，比如显示上传成功或失败的信息。

请注意，由于HarmonyOS的API可能与Android或iOS有所不同，你需要参考HarmonyOS的官方文档来具体实现上述步骤。

如果问题依旧没法解决请联系官网客服,官网地址是 https://www.itying.com/category-93-b0.html

回到顶部