HarmonyOS Web 图片上传功能失效

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

HarmonyOS

FengTianYa

2024-11-06 09:04:01

2354浏览

回答 1

按赞同

按时间

zbw_apple

参考demo：

// 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; 
        }) 
    } 
  } 
}
// 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> 
  </body> 
  </html> 
  <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>1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.

2024-11-06 15:53:38

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS Web 图片上传功能失效

订阅鸿蒙技术特刊，精选内容抢先看