HarmonyOS 鸿蒙Next 使用httpRequest上传图片实战

HarmonyOS 鸿蒙Next 使用httpRequest上传图片实战

背景： 项目API接收boundary。一开始尝试使用fileupload方法失败，这个方法貌似只能上传文件但无法按项目的API接收返回值，转变思路使用http.request.

1、注意需要构建上传文件使用的分隔符

  let boundary: string = `WebKitFormBoundary${FileUtil.generate15CharString()}`;

  private static  generate15CharString():string {
    const characters = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
    let str = '';
    for (let i = 0; i < 15; i++) {
      // 随机选择characters字符串中的一个字符
      const randomChar = characters.charAt(Math.floor(Math.random() * characters.length));
      str += randomChar;
    }
    return str;
  }

2、打开文件读取到沙箱中

// 打开文件

    let file = fs.openSync(fileModel.localUrl, fs.OpenMode.READ_ONLY);
    const dateStr = (new Date().getTime()).toString()
    // 临时文件目录
    let newPath = context.cacheDir + `/${dateStr}.${fileModel.fileSuffix}`;
    // 转化路径
    fs.copyFileSync(file.fd, newPath);
    // 新的路径
    let realUri = "internal://cache/" + newPath.split("cache/")[1];

3、构建文字部分

// 构建文字部分
    let textContent: string = "";
    // 选择要上传的文件的内容
    let fileContent: ArrayBuffer = await FileUtil.readContentFromFile(newPath)
    // 上传请求的body内容
    let bodyContent = FileUtil.buildBodyContentNew(fileName, contentType, boundary, textContent, fileContent)

完整代码实例：

  public static async uploadFileNew<T>(fileModel: FileModel, uploadConfigModel: UploadConfigModel, callback: (result: T) => void) {
    // 获取上下文
    let context = getContext()
    // 打开文件
    let file = fs.openSync(fileModel.localUrl, fs.OpenMode.READ_ONLY);
    const dateStr = (new Date().getTime()).toString()
    // 临时文件目录
    let newPath = context.cacheDir + `/${dateStr}.${fileModel.fileSuffix}`;
    // 转化路径
    fs.copyFileSync(file.fd, newPath);
    // 新的路径
    let realUri = "internal://cache/" + newPath.split("cache/")[1];

    let contentType=FileUtil.getContentType(fileModel.fileSuffix);
    // return new Promise(async (resolve, reject) => {
    //   FileUtil.uploadFileCustom(uploadConfigModel.uploadUrl,newPath,uploadConfigModel.header,new Map<string, string>(),contentType)
    // });

    let resultData:string
    let fileName = `${newPath.split("cache/")[1]}`;
    // 上传文件使用的分隔符
    let boundary: string = `WebKitFormBoundary${FileUtil.generate15CharString()}`;
    // 构建文字部分
    let textContent: string = "";
    // 选择要上传的文件的内容
    let fileContent: ArrayBuffer = await FileUtil.readContentFromFile(newPath)
    // 上传请求的body内容
    let bodyContent = FileUtil.buildBodyContentNew(fileName, contentType, boundary, textContent, fileContent)
    let token=await AppConfig.getToken();
    let Fileheader = {
      "Authentication": token,
      "User-Agent":"123",
      "Content-Type":`multipart/form-data;boundary=----${boundary}`
    } as Filehearder
    //header['Content-Type']=`----${boundary}`;
    // http请求对象
    let httpRequest = http.createHttp();
    let opt: http.HttpRequestOptions = {
      method: http.RequestMethod.POST,
      header: Fileheader,
      extraData: bodyContent
    }
    // 发送上传请求
    httpRequest.request(uploadConfigModel.uploadUrl, opt)
      .then((resp) => {
        httpRequest.destroy();
        console.log(JSON.stringify(resp.result))
        resultData = resp.result as string
        let data2:T =JSON.parse(resultData) as T
        callback(data2);
      })
      .catch((e: BusinessError) => {
        console.log("uploadFile error:" + (e as BusinessError).message)
        httpRequest.off('headersReceive');
        httpRequest.destroy();
      })

  }



  private  static  getContentType(extension:string) {
    switch (extension.toLowerCase()) {
      case 'jpg':
      case 'jpeg':
        return 'image/jpeg';
      case 'png':
        return 'image/png';
      case 'docx':
        return 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
      case 'xlsx':
        return 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
      case 'pdf':
        return 'application/pdf';
      case 'doc':
        return 'application/msword';
    // 其他文件类型可以根据需要添加
      default:
        return 'application/octet-stream'; // 未知类型
    }
  }
  private static  generate15CharString():string {
    const characters = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
    let str = '';
    for (let i = 0; i < 15; i++) {
      // 随机选择characters字符串中的一个字符
      const randomChar = characters.charAt(Math.floor(Math.random() * characters.length));
      str += randomChar;
    }
    return str;
  }