uni-app webview在app端上传非媒体类型文件

在处理uni-app中Webview组件在App端上传非媒体类型文件的需求时，我们通常会遇到一些挑战，因为Webview默认主要处理的是媒体文件上传（如图片、视频等）。不过，通过一些自定义的处理和代码调整，我们仍然可以实现非媒体文件的上传功能。

以下是一个基本的实现思路，结合uni-app和原生插件来实现非媒体文件的上传：

1. 前端部分（uni-app）：

   在uni-app中，我们可以使用<web-view>组件加载一个网页，该网页包含文件上传的表单。为了处理非媒体文件上传，我们需要在网页端通过JavaScript捕获文件选择事件，并将文件数据传递给uni-app的Native层。

   <!-- uni-app页面 -->
   <template>
     <view>
       <web-view src="your-webview-url" @message="handleMessage"></web-view>
     </view>
   </template>
   
   <script>
   export default {
     methods: {
       handleMessage(event) {
         const { data } = event.detail[0];
         // 处理从webview传递过来的文件数据
         this.uploadFileToServer(data);
       },
       uploadFileToServer(fileData) {
         // 实现文件上传到服务器的逻辑
         uni.uploadFile({
           url: 'your-server-upload-url',
           filePath: fileData.path,
           name: 'file',
           formData: {
             user: 'test'
           },
           success: (uploadFileRes) => {
             console.log('上传成功', uploadFileRes);
           },
           fail: (err) => {
             console.error('上传失败', err);
           }
         });
       }
     }
   }
   </script>
   

2. 原生插件部分：

   由于uni-app的Webview组件限制，我们需要开发一个原生插件来捕获文件选择事件，并将文件数据传递给uni-app。这部分代码涉及到Android和iOS的原生开发。

   • Android：在Android中，我们可以通过自定义WebViewClient来处理文件选择事件，并获取文件数据，然后通过JavaScript接口将数据传递回uni-app。

   • iOS：在iOS中，我们可以使用WKWebView，并通过其navigationDelegate或UIDocumentPickerViewController来处理文件选择事件，同样将数据通过JavaScript接口传递回uni-app。

   由于原生插件开发的复杂性，这里不提供具体代码，但核心思路是在原生层捕获文件数据，并通过JavaScript接口与uni-app通信。

3. 服务器端：

   服务器端需要实现文件接收和存储的逻辑，这部分通常使用标准的文件上传处理逻辑，如使用PHP、Node.js等后端技术。

通过上述步骤，我们可以实现uni-app中Webview组件在App端上传非媒体类型文件的功能。需要注意的是，原生插件的开发需要根据具体的业务需求进行定制。