HarmonyOS 鸿蒙Next app内嵌H5网页实现图片上传

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

HarmonyOS 鸿蒙Next app内嵌H5网页实现图片上传

app内嵌H5网页如何访问手机图片并选择上传,H5上传图片用uni.chooseImage方法。

2 回复

涉及到uni对象注入,你的uni对象注入了没有,

以下是图片处理这部分的代码

Web({xxxx})

      .onInterceptRequest((event) => {

            if (!event) {

              return null

            }

            const url = event?.request?.getRequestUrl()

            if (isFileUri(url)) {

              const path = url

              const file = fs.openSync(path, fs.OpenMode.READ_ONLY)

              const fd = file.fd

              const responseWeb = new WebResourceResponse()

              responseWeb.setResponseData(fd)

              responseWeb.setResponseCode(200)

              responseWeb.setReasonMessage('OK')

              responseWeb.setResponseIsReady(true)

              console.info(TAG, `responseWeb`)

              return responseWeb

            }

            return null

          })

export function isFileUri (path: string): boolean {

  if (path && typeof(path) === 'string' && (path.startsWith('file://') || path.startsWith('datashare://'))) {

    return true

  }

  return false

}

更多关于HarmonyOS 鸿蒙Next app内嵌H5网页实现图片上传的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next应用中内嵌H5网页并实现图片上传,可以通过以下步骤进行:

  1. 配置WebView组件:在应用的布局文件中配置WebView组件,用于显示H5网页内容。

  2. 加载H5网页:通过WebView组件的loadUrl方法加载H5网页的URL。

  3. 处理文件选择:在H5网页中,使用<input type="file">标签来实现图片选择功能。当用户在网页中点击图片上传按钮时,会触发文件选择对话框。

  4. 捕获文件选择事件:通过JavaScript监听文件选择事件,获取用户选择的图片文件。

  5. 上传图片:使用AJAX或Fetch API将图片文件上传到服务器。在上传过程中,可能需要对图片文件进行编码(如Base64编码)或转换为FormData对象。

  6. 处理上传结果:服务器接收并处理图片文件后,返回处理结果。H5网页通过JavaScript处理上传结果,并更新页面内容。

  7. 跨域问题:如果H5网页与服务器不在同一个域下,可能会遇到跨域资源共享(CORS)问题。需要在服务器端配置CORS策略,允许来自特定域的请求。

  8. 权限配置:确保应用具有访问网络和读取存储的权限。

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

回到顶部