vant中使用文件上传

vant中使用文件上传

在Vant中使用文件上传组件Uploader可以实现文件的上传功能。以下是一个简单的例子，展示如何使用Uploader组件实现文件上传：

<template>
  <van-uploader
    :after-read="afterRead"
    multiple
    :max-count="3"
    :before-read="beforeRead"
  />
</template>
 
<script>
export default {
  methods: {
    // 文件读取前的钩子，返回 false 可以阻止文件读取
    beforeRead(file) {
      // 在这里可以进行文件格式、大小的校验
      if (file.size > 1024 * 1024 * 5) {
        this.$toast('文件大小不能超过 5MB');
        return false;
      }
      // 返回 true 允许读取文件
      return true;
    },
    // 文件读取完成后的钩子
    afterRead(file) {
      // 在这里可以执行上传操作
      const formData = new FormData();
      formData.append('file', file.file);
 
      // 示例使用 axios 进行文件上传
      this.uploadFile(formData);
    },
    // 文件上传的方法
    uploadFile(formData) {
      // 使用你的上传接口地址替换以下 URL
      const url = 'your-upload-api-url';
      this.$http.post(url, formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(response => {
        // 文件上传成功的处理逻辑
        console.log('Upload success', response);
      }).catch(error => {
        // 文件上传失败的处理逻辑
        console.error('Upload failed', error);
      });
    }
  }
};
</script>