HarmonyOS 鸿蒙Next 文件上传formData打印为空?发给后端后端显示file为null

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

HarmonyOS 鸿蒙Next 文件上传formData打印为空?发给后端后端显示file为null

//存储图片 @State avatar: FormData = new FormData()

//上传头像 Column() { Stack() { Image(this.profileImage) .alt($r(‘app.media.uploadImage’)) .width(100) .height(100) .objectFit(ImageFit.Cover) if (this.uri) { Image($rawfile(“functionImage/diary_cancel.png”)) .position({ right: 7, top: 7 }) .width(25) .height(25) .onClick(() => { this.profileImage = new Object() as PixelMap this.uri = “” }) } } .width(100) .height(100)

if (!this.uri) { Text(“请上传图片”) .fontSize(24) .margin({ top: 10 }) } } .margin({ bottom: 30 }) .onClick(async () => { if (!this.uri) { const uri = await uploadImage() if (uri) { try { // 以只读模式打开指定的文件,通过传入的uri参数确定要打开的文件位置 const file = fileIo.openSync(uri, fileIo.OpenMode.READ_ONLY) // 构建一个新的文件路径,存储拷贝后的文件 const filePath = getContext(this).cacheDir + ‘/’ + file.name console.log(“filePath”, filePath) console.log(“file.fd”, file.fd) //设置回显的地址 this.uri = filePath // 通过uri打开图片文件,获取文件fd const imageSourceApi = image.createImageSource(file.fd); // 将图片解码为pixelmap imageSourceApi.createPixelMap().then(pixelmap => { this.profileImage = pixelmap console.log(‘Succeeded in creating pixelmap object through image decoding parameters.’) }).catch((err: BusinessError) => { console.log(‘Failed to create pixelmap object through image decoding parameters.’) })

    // 将打开的文件同步的复制到新构建的文件路径
    fileIo.copyFileSync(file.fd, filePath)
    // 关闭打开的文件,释放资源
    fileIo.closeSync(file.fd)
    // 创建一个新的FormData对象,用于准备文件上传 这是axios上传图片需要的对象类型 FormData
    // 添加一个名字叫file的数据,数据需要 `internal://cache/在沙箱目录的文件地址`
    // console.log("avatar", file.name)
    // this.avatar.append('file', `internal://cache/${file.name}`)
    this.avatar.append('file', `internal://${file.name}`)
    this.cacheUri = `internal://${file.name}`
    console.log("cacheUri", this.cacheUri)
    console.log("this.avatar",JSON.stringify(this.avatar))
  } catch (e) {
    AlertDialog.show({ message: '头像选择失败' + JSON.stringify(e) })
  }
} else {
  DialogUtil.showConfirmDialog({
    title: "获取图片失败",
    message: '',
    confirm: "确定",
    onAction: () => {
    }
  })
}

} })

export const uploadImageApi = (file: FormData) => { return axios.post(“http://192.168.43.223:8080/common/upload”, file, { headers: { ‘Content-Type’: ‘multipart/form-data’ } }) .then((res: ResponseType) => { // 处理成功响应,将文件路径返回 return res.data; }) .catch((error: AxiosError<ApiResponse<null>>) => { // 处理错误响应,抛出错误以便调用者捕获 return Promise.reject(error); }); }

但是当我点击注册时报错:

并且后端报错:


更多关于HarmonyOS 鸿蒙Next 文件上传formData打印为空?发给后端后端显示file为null的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

检查一下这个地方,这个file是和后端约定好的,不是固定写成‘file’,另外,传值改成这样,试试行不行了

更多关于HarmonyOS 鸿蒙Next 文件上传formData打印为空?发给后端后端显示file为null的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


好的谢谢大佬了我又去axios官网文档看了看,重新把请求写了一下可以了,

大佬 所以最够具体是改成咋样提交才有效果啊

我后来发现我之前上传图片的格式写错了,可以看这个axios的文档里面有文件上传的方法,下面是我看着他文档抄的,因为之前参加比赛时间太紧了,我没有封装,你可以封装一下再使用。

这个是鸿蒙axios的文档,如果你使用axios你可以看看

https://gitee.com/openharmony-sig/ohos_axiosh

// 发送请求
axios.post<string, AxiosResponse<ApiResponse<string>>, FormData>('http://192.168.43.223:8080/common/upload',
  this.avatar, {
    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(async (res: AxiosResponse<ApiResponse<string>>) => {
  console.info("result" + JSON.stringify(res.data));
  if (res.data.data) {
    //如果图片上传成功再上传的表单
    const form: registerModel = {
      email: this.email,
      userName: this.userName,
      password: this.password,
      userAvatar: res.data.data,
      checkPassword: this.rePassword,
      code: this.code
    }
    const resRe = await registerApi(form);
    // 处理成功情况
    if (resRe.code == 1) {
      this.isLoad = false
      ToastUtil.showShort("注册成功");
      setTimeout(() => {
        router.back()
      }, 1000)
    } else {
      this.isLoad = false
      DialogUtil.showConfirmDialog({
        title: "注册失败",
        message: resRe.msg,
        confirm: "确定",
        onAction: () => {
        }
      })
    }
  } else {
    this.isLoad = false
    DialogUtil.showConfirmDialog({
      title: "图片上传失败",
      message: '',
      confirm: "确定",
      onAction: () => {
      }
    })
  }
}).catch((err: AxiosError) => {
  this.isLoad = false
  AlertDialog.show({ message: '头像上传失败了' + JSON.stringify(err) })
  console.error("error:" + JSON.stringify(err));
})

在HarmonyOS鸿蒙系统中,如果你遇到使用formData进行文件上传时,后端显示file为null的问题,这通常与formData的构建或文件对象的处理有关。以下是一些可能的原因及解决方案:

  1. 文件对象未正确添加:确保在构建formData时,文件对象是以正确的键(key)被添加的。例如,使用formData.append('file', fileObject);,其中'file'应与后端期望的键一致。

  2. 文件对象无效:检查文件对象是否有效,即用户是否确实选择了文件,并且文件对象不是nullundefined

  3. Content-Type问题:虽然HarmonyOS的HTTP请求库通常会处理Content-Type,但如果你手动设置了Content-Type,确保它包含multipart/form-data且边界正确。

  4. 后端解析问题:确认后端服务器能够正确解析multipart/form-data格式的数据,特别是关于文件部分的解析。

  5. 网络问题:检查网络连接是否稳定,以及是否有防火墙或代理服务器可能阻止或修改了请求。

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

回到顶部