Ionic4中FormData上传捕获视频失败及HTML视频无法显示求助

我来帮你搞定这两个问题——FormData上传失败和视频无法在HTML显示，咱们一步步拆解解决：

首先看你代码里的核心错误：直接把MediaFile对象塞进Blob是不对的，new Blob([file], movVideo)里的file是Cordova返回的MediaFile实例，不是文件的二进制内容，服务器自然识别不了。

正确的做法是通过Cordova的File API读取文件的真实二进制数据，再生成合法的Blob/File对象来构造FormData。修改你的readVideoFile函数：

readVideoFile(file: MediaFile) {
  // 先通过Cordova的文件系统API解析本地路径
  window.resolveLocalFileSystemURL(file.fullPath, (fileEntry) => {
    // 从FileEntry获取File对象
    fileEntry.file((nativeFile) => {
      const reader = new FileReader();
      
      reader.onload = (event) => {
        // 用读取到的ArrayBuffer创建正确的Blob
        const videoBlob = new Blob([event.target.result], { type: nativeFile.type });
        const formData = new FormData();
        
        // 正确追加文件到FormData，字段名要和服务器接收的一致（这里是'file'）
        formData.append('file', videoBlob, nativeFile.name);
        
        // 执行上传
        this.upload.captureFileUpload(formData).subscribe(
          (res) => {
            console.log('视频上传成功:', res);
          },
          (err) => {
            console.error('视频上传失败:', err);
          }
        );
      };
      
      // 以ArrayBuffer格式读取文件内容
      reader.readAsArrayBuffer(nativeFile);
    }, (err) => console.error('获取本地File对象失败:', err));
  }, (err) => console.error('解析文件路径失败:', err));
}

额外注意： #

• 确保已经安装了Cordova File插件：cordova plugin add cordova-plugin-file
• Android 10+需要申请READ_EXTERNAL_STORAGE权限，在config.xml里配置或者通过权限插件动态申请

你当前用的attachment_file_path可能是本地文件路径（比如content://开头），WebView无法直接解析这类路径。我们可以在读取文件时生成Blob URL或者DataURL来给video标签使用。

在刚才的reader.onload回调里添加显示逻辑：

reader.onload = (event) => {
  const videoBlob = new Blob([event.target.result], { type: nativeFile.type });
  
  // 生成Blob URL用于在WebView中显示视频
  this.attachment_file_path = URL.createObjectURL(videoBlob);
  this.attachValue = {
    fileName: nativeFile.name,
    mimeType: nativeFile.type
  };
  
  // 上传代码保持不变...
};

然后修改HTML里的video标签，用Angular的属性绑定语法更安全：

<video controls class="chat-video" *ngIf="attachment_file_path">
  <source [src]="attachment_file_path" [type]="attachValue.mimeType"/>
  Your browser does not support HTML video.
</video>

为什么这样改？ #

• URL.createObjectURL会生成一个临时的本地URL，WebView可以直接识别并加载Blob内容
• 用*ngIf确保只有当视频路径存在时才渲染标签，避免初始状态的错误提示
• 属性绑定[src]和[type]比字符串拼接更可靠，不会出现路径解析错误

内容的提问来源于stack exchange，提问作者Priyank