Vue3 移动端H5文件上传组件

Vue3 中移动端 H5 文件上传组件通常会利用 HTML5 的 `FileReader` 和 `FormData` API 来实现。你可以使用现成的开源库如 Element Plus、Quill 或者 vant-ui 等提供的 Upload 组件，它们已经封装了常见的文件上传功能，并且考虑到了跨浏览器兼容性和用户体验。

Element Plus 的 Upload 组件示例：

<template>
  <el-upload
    action="http://your-api-url/upload"
    :auto-upload="false" 
    :before-upload="beforeUpload"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或点击选择文件</div>
  </el-upload>
</template>

<script>
import { ref } from 'vue';
export default {
  data() {
    return {
      file: null,
    };
  },
  methods: {
    beforeUpload(file) {
      // 验证文件类型或大小等
      if (file.type !== 'image/jpeg') {
        this.$message.error('只支持jpg格式');
        return false;
      }
      return true;
    },
    handleSuccess(response, file) {
      console.log('文件上传成功', response);
    },
    handleError(error, file) {
      console.error('文件上传失败', error);
    },
  },
};
</script>

在这个例子中，用户可以选择文件，然后在`beforeUpload`函数中进行预处理，如验证文件类型和大小。`action`属性指定服务器接收文件的 URL。当上传完成时，会触发`handleSuccess`或`handleError`回调。