HarmonyOS web上传文件和图片

希望提供上传文件和图片的web开发demo。

HarmonyOS

put_get

2024-10-24 13:10:59

浏览

回答 1

待解决

回答 1

按赞同

按时间

Heiang

上传文件的demo如下：

import web_webview from '@ohos.web.webview';  
import picker from '@ohos.file.picker';  
import { BusinessError } from '@ohos.base';  
  
@Entry  
@Component  
struct UploadFile {  
  controller:web_webview.WebviewController = new web_webview.WebviewController();  
  
  build() {  
    Column() {  
      Web({ src: $rawfile('setAttrAndEvent/uploadFile/index.html'), controller: this.controller })  
        .onShowFileSelector((event) => {  
          const documentSelectOptions = new picker.DocumentSelectOptions();  
          let uri: string | null = null;  
          const documentViewPicker = new picker.DocumentViewPicker();  
          documentViewPicker.select(documentSelectOptions)  
            .then((documentSelectResult) => {  
              uri = documentSelectResult[0];  
              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  
        })  
    }  
  }  
}

上传图片的demo如下：

import web_webview from '@ohos.web.webview';  
import picker from '@ohos.file.picker';  
import { BusinessError } from '@ohos.base';  
  
@Entry  
@Component  
struct UploadFile {  
  controller:web_webview.WebviewController = new web_webview.WebviewController();  
  @State uri: Array<string> | null = null;  
  build() {  
    Column(){  
      Text('选中的图片')  
      List(){  
        ForEach(this.uri,(item:string)=>{  
          ListItem(){  
            Row(){  
              Image(item)  
                .width('30vh')  
                .height('30vh')  
            }  
  
          }  
          .width('30vh')  
          .height('30vh')  
        })  
      }  
      .width('30vh')  
      .height('30vh')  
      Web({  
        src:$rawfile('setAttrAndEvent/uploadFile/index.html'),  
        controller:this.controller  
      })  
        .width('100%')  
        .height('100vh')  
        .backgroundColor('grey')  
        .onShowFileSelector((event)=>{  
          console.log('MyFileUploader onShowFileSelector invoked')  
          let PhotoSelectOptions = new picker.PhotoSelectOptions();  
          PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;  
          PhotoSelectOptions.maxSelectNumber = 5;  
  
          const photoPicker = new picker.PhotoViewPicker();  
          photoPicker .select(PhotoSelectOptions).then((photoSelectResult) => {  
            this.uri = photoSelectResult.photoUris;  
            console.info('photoPicker .select to file succeed and photoSelectResult is:' + JSON.stringify(photoSelectResult));  
            console.info('photoPicker .select to file succeed and uri is:' + this.uri);  
            if (event) {  
              event.result.handleFileList(this.uri);  
            }  
          }).catch((err: BusinessError) => {  
            console.error(`Invoke photoPicker .select failed, code is ${err.code}, message is ${err.message}`);  
          })  
          return true;  
        })  
    }  
  }  
}

index.html页面如下：

<!doctype html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport"  
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  
    <meta http-equiv="X-UA-Compatible" content="ie=edge">  
    <title>Document</title>  
</head>  
<body>  
<div class="upload">  
    <!--  点击上传按钮   -->  
    <form id="upload-form" enctype="multipart/form-data">  
        <input type="file" id="upload" name="upload"/>  
    </form>  
</div>  
</body>  
</html>  
<style>  
    body{  
        width:100%;  
        height:auto;  
        margin:50px auto;  
        text-align:center;  
        background-color:#2EB3FF  
    }  
</style>

2024-10-24 15:10:46

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS web上传文件和图片

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