有没有HarmonyOS鸿蒙Next中从相册选择图片后上传到服务器的demo

有没有HarmonyOS鸿蒙Next中从相册选择图片后上传到服务器的demo 需要一个功能，从相册选择图片后上传到服务器，上传的时候会有额外的参数一起发送到服务器上。之后服务器会返回文件的远程连接。

有没有上述功能的demo

3 回复 
uploadImage() {
  let context1 = getContext(this) as common.UIAbilityContext;
  let uploadConfig1 = {
    url: 'http://127.0.0.1:8224/system/upload/upFile2',
    header: {"Content-Type":"multipart/form-data","Authorization": "" },
    method: 'POST',
    files: [ { filename: 'test.jpg', name: 'file', uri: 'internal://cache/test.jpg', type: 'jpg' } ],
    data: [ { name: 'test', value: '111' } ]
  } // 将本地应用文件上传至网络服务器
  try {
    request.uploadFile(context1, uploadConfig1)
      .then((uploadTask) => {
        uploadTask.on('complete', (taskStates) => {
          for (let i = 0; i < taskStates.length; i++) {
            console.info(`xx upload complete taskState: ${JSON.stringify(taskStates[i])}`);
            this.message = JSON.stringify(taskStates[i])
          }
        })
      })
      .catch((err) => {
        console.error(`xx Invoke uploadFile failed, code is ${err.code}, message is ${err.message}`);
        this.message = err.message
      })
  } catch (err) {
    console.error(`xx Invoke uploadFile failed, code is ${err.code}, message is ${err.message}`);
    this.message = err.message
  }
}

试试

更多关于有没有HarmonyOS鸿蒙Next中从相册选择图片后上传到服务器的demo的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙）Next中，从相册选择图片并上传到服务器可以通过使用@ohos.multimedia.mediaLibrary和@ohos.net.http模块实现。首先，使用mediaLibrary模块从相册中选择图片，获取图片的URI。然后，使用http模块将图片上传到服务器。

以下是一个简单的代码示例：

import mediaLibrary from '@ohos.multimedia.mediaLibrary';
import http from '@ohos.net.http';

// 从相册选择图片
async function selectImage() {
    const media = mediaLibrary.getMediaLibrary();
    const fileKeyObj = mediaLibrary.FileKey;
    const fetchOption = {
        selections: `${fileKeyObj.MEDIA_TYPE}=?`,
        selectionArgs: [mediaLibrary.MediaType.IMAGE.toString()],
    };
    const fetchResult = await media.getFileAssets(fetchOption);
    const fileAsset = await fetchResult.getFirstObject();
    return fileAsset.uri;
}

// 上传图片到服务器
async function uploadImage(uri: string) {
    const httpRequest = http.createHttp();
    const options = {
        method: http.RequestMethod.POST,
        header: { 'Content-Type': 'multipart/form-data' },
        extraData: {
            file: {
                filename: 'image.jpg',
                uri: uri,
                type: 'image/jpeg',
            },
        },
    };
    const response = await httpRequest.request('https://your-server-url/upload', options);
    return response.result;
}

// 主函数
async function main() {
    const imageUri = await selectImage();
    const uploadResult = await uploadImage(imageUri);
    console.log('Upload result:', uploadResult);
}

main();

这个示例展示了如何从相册中选择图片并将其上传到服务器。mediaLibrary模块用于访问相册中的图片，http模块用于处理HTTP请求并将图片上传到指定的服务器URL。

在HarmonyOS（鸿蒙OS）Next中，你可以通过以下步骤实现从相册选择图片并上传到服务器的功能：

  1. 选择图片：使用@ohos.file.picker模块中的PhotoViewPicker来选择图片。
  2. 获取图片路径：选择图片后，获取图片的URI。
  3. 读取图片数据：使用@ohos.file.fs模块读取图片文件数据。
  4. 上传图片：使用@ohos.net.http模块将图片数据通过HTTP请求上传到服务器。

以下是一个简单的代码示例：

import picker from '@ohos.file.picker';
import fs from '@ohos.file.fs';
import http from '@ohos.net.http';

async function selectAndUploadImage() {
    // 选择图片
    const photoPicker = new picker.PhotoViewPicker();
    const photoSelectOptions = new picker.PhotoSelectOptions();
    photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;
    photoSelectOptions.maxSelectNumber = 1;
    const photoSelectResult = await photoPicker.select(photoSelectOptions);

    if (photoSelectResult && photoSelectResult.photoUris.length > 0) {
        const imageUri = photoSelectResult.photoUris[0];

        // 读取图片数据
        const file = fs.openSync(imageUri, fs.OpenMode.READ_ONLY);
        const imageData = fs.readSync(file.fd);

        // 上传图片
        const httpRequest = http.createHttp();
        const options = {
            method: http.RequestMethod.POST,
            header: { 'Content-Type': 'image/jpeg' },
            extraData: imageData
        };
        const response = await httpRequest.request('https://your-server-url/upload', options);

        if (response.responseCode === http.ResponseCode.OK) {
            console.log('Image uploaded successfully');
        } else {
            console.error('Failed to upload image');
        }

        fs.closeSync(file);
    }
}

这个示例展示了如何从相册选择图片并上传到服务器。你需要根据实际情况调整服务器URL和请求参数。

回到顶部