uniapp h5上uploadfile blob

在uniapp中，要在H5上使用uploadFile上传文件，可以通过Blob实现。Blob是JavaScript中的一个API，允许处理二进制数据。在H5环境中，我们可以将需要上传的文件转换为Blob对象，然后通过uni.uploadFile进行上传。

首先，在代码中创建一个input元素，用于选择本地文件。然后在选择文件时，获取到文件后，通过FileReader对象将文件转换为Blob对象。代码示例如下：

<input type="file" id="fileInput" accept="image/*" @change="selectFile">

<script>
export default {
  methods: {
    selectFile(e) {
      const file = e.target.files[0];
      if (!file) {
        return;
      }
      const reader = new FileReader();
      reader.onload = (e) => {
        const blob = new Blob([new Uint8Array(e.target.result)]);
        // 调用上传文件的方法
        this.uploadFile(blob);
      }
      reader.readAsArrayBuffer(file);
    },
    uploadFile(blob) {
      uni.uploadFile({
        url: 'http://example.com/upload', // 上传地址
        filePath: blob, // Blob对象
        name: 'file', // 上传文件的键
        success: (res) => {
          console.log(res);
        },
        fail: (err) => {
          console.log(err);
        }
      })
    }
  }
}
</script>

在上述示例中，我们首先通过input元素选择文件，并在选择文件时调用selectFile方法。selectFile方法中，通过FileReader对象的readAsArrayBuffer方法读取文件内容，并在读取完成后将内容转换为Blob对象。最后，调用uploadFile方法进行文件上传操作。

需要注意的是，uni.uploadFile的filePath参数接受的是Blob对象，而不是文件路径。此外，上传文件的URL和参数需要根据实际情况进行配置。

通过以上方法，我们可以在uniapp的H5环境中使用uploadFile上传Blob对象。