HarmonyOS 鸿蒙Next Web 图片上传功能失效

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

HarmonyOS 鸿蒙Next Web 图片上传功能失效

使用Web的.onShowFileSelector，接收H5页面的照片上传，原来是可行的，现在的NEXT版本失效了。

原生代码：

const context = getContext(this) as common.UIAbilityContext
let want: Want = {
  action: wantConstant.Action.ACTION_VIDEO_CAPTURE,
  parameters: {
    "callBundleName": context.abilityInfo.bundleName,
  }
}

context.startAbilityForResult(want, (error: BusinessError, data: common.AbilityResult) => {
  if (error && error.code !== 0) {
    //logger.error(`${TAG_CAMERA_ERROR} ${JSON.stringify(error.message)}`);
    console.log(TAG, `message ${error.message}`)
    return;
  }
  let uri: string = data.want?.parameters?.resourceUri as string;
  console.log(TAG, ' uri ', uri)
  if (result) {
    result.handleFileList([uri])
  }
})

这里也接收到了uri并返回给到h5：

<input ref="album" type="file" id="upload" name="upload" accept="*/*" onchange="showPic()" />
<p id="image_preview">图片预览</p>
<img id="image" width="100%" />

function showPic() {
  let event = this.event;
  let tFile = event ? event.target.files : [];
  if (tFile === 0) {
    document.getElementById('image_preview').style.display = 'block';
    document.getElementById('image_preview').innerHTML = "未选择图片";
    return
  }
  document.getElementById('image').setAttribute('src', URL.createObjectURL(tFile[0]));
  document.getElementById('image_preview').style.display = 'block';
  document.getElementById('image').style.display = 'block';
}

目前来看，是html input 标签收不到onchange 回调，导致渲染不出来。

Web 控件接收到onShowFileSelector 事件，跳转拍照，回来通过 result.handleFileList([uri]) 返回给H5，但是接下来没有走onInterceptRequest事件。 要是给个完成的Web 上传图片到input标签的案例就好了。


更多关于HarmonyOS 鸿蒙Next Web 图片上传功能失效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

原生端：

// WebComponent.ets
import { webview } from '@kit.ArkWeb';
import { picker } from '@kit.CoreFileKit';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Web({ src: $rawfile('index.html'), controller: this.controller })
        .onShowFileSelector((event) => {
          console.log('MyFileUploader onShowFileSelector invoked');
          const documentSelectOptions = new picker.PhotoSelectOptions();
          let uri: string | null = null;
          const documentViewPicker = new picker.PhotoViewPicker();
          documentViewPicker.select(documentSelectOptions).then((documentSelectResult) => {
            console.log('[documentSelectResult]', JSON.stringify(documentSelectResult))
            console.log('[documentSelectResult]', JSON.stringify(documentSelectResult.photoUris[0]))
            uri = documentSelectResult.photoUris[0];
            console.info('documentViewPicker.select to file succeed and uri is:' + uri);
            if (event) {
              event.result.handleFileList([uri]);
            }
          }).catch((err: BusinessError) => {
            console.error(`Invoke documentViewPicker.select failed, code is ${err.code}, message is ${err.message}`);
          })
          return true;
        })
    }
  }
}

H5端：

// index.html
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
</head>
<body>
<form id="upload-form" enctype="multipart/form-data">
    <input ref="album" type="file" id="upload" name="upload" accept="*/*" onchange="showPic()"/>
    <p id="image_preview">图片预览</p>
    <img id="image" width="100%"/>
</form>
<script>
    function showPic() {
     let event = this.event;
     let tFile = event ? event.target.files : [];
     if (tFile === 0) {
       document.getElementById('image_preview').style.display = 'block';
       document.getElementById('image_preview').innerHTML = "未选择图片";
       return
     }
     document.getElementById('image').setAttribute('src', URL.createObjectURL(tFile[0]));
     document.getElementById('image_preview').style.display = 'block';
     document.getElementById('image').style.display = 'block';
    }
</script>
</body>
</html>

试下呢

更多关于HarmonyOS 鸿蒙Next Web 图片上传功能失效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


针对HarmonyOS 鸿蒙Next Web图片上传功能失效的问题，可能的原因及解决方向如下：

  1. 权限配置：检查应用是否已正确配置图片上传所需的权限，包括存储访问权限和网络访问权限。在鸿蒙系统中，权限管理较为严格，未授权可能导致功能失效。

  2. 前端代码检查：验证前端代码中图片上传的逻辑是否正确，包括文件选择、文件读取、文件编码及发送请求等步骤。确保文件对象未被错误处理或丢失。

  3. 后端接口验证：检查后端接收图片上传的接口是否正常运行，包括接口地址、请求方法、请求头及请求体格式等是否正确。后端异常或配置错误也可能导致上传失败。

  4. 网络状态：确认设备网络状态良好，上传过程中网络波动或中断可能导致上传失败。

  5. 系统兼容性：检查鸿蒙系统版本是否与Next Web框架及图片上传功能兼容。系统更新可能引入新的限制或bug，影响功能运行。

  6. 日志分析：查看应用及系统日志，分析上传过程中出现的错误信息，定位问题根源。

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

回到顶部