vue+vant文件上传组件

功能介绍：

在移动端vue项目开发中，使用vant组件库的van-uploader组件实现文件上传、下载、展示。

大致功能介绍：

1. 文件上传，并控制允许筛选上传文件类型；
2. 文件展示，在详情页允许禁用组件上传，并展示文件列表；
3. 文件下载，点击允许下载文件；

整体思路：

1. 使用vant组件库的van-uploader组件；
2. 根据vant文档，灵活使用van-uploader组件的各个属性；

简单效果展示：

具体实现：

一、安装vant：

npm i vant -S

修改main.js文件导入vant组件：

// 导入Vant组件
import Vant from 'vant';
// 导入Vant样式
import 'vant/lib/index.css';
// 注册vant组件
Vue.use(Vant);

二、基础用法：

文件上传完毕后会触发 after-read 回调函数，获取到对应的 file 对象。

<template>
  <div>
    <!-- van-uploader组件使用 -->
    <!-- after-read：文件读取完成后的回调函数 -->
    <van-uploader :after-read="afterRead" />
  </div>
</template>

after-read两个回调参数：

参数名	说明	类型
file	file 对象	object
detail	额外信息，包含 name 和 index 字段	object

export default {
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
  },
};

三、进阶用法：

1.文件预览：

<template>
  <div>
    <!-- v-model：绑定已经上传的文件列表，并展示文件列表的预览图。 -->
    <!-- multiple：是否开启图片多选，部分安卓机型不支持 -->
    <!-- max-count：限制文件的数量，数量达到限制后，隐藏上传区域。-->
    <van-uploader v-model="fileList" multiple :max-count="2" />
  </div>
</template>

export default {
  data() {
    return {
      fileList: [],
    };
  },
};

2.上传文件：

可以调用后台接口，实现带上传状态的效果

<template>
  <div>
    <!-- status 属性可以标识上传状态 -->
    <!-- uploading 表示上传中 -->
    <!-- failed 表示上传失败 -->
    <!-- done 表示上传完成。 -->
    <van-uploader v-model="fileList" :after-read="afterRead" />
  </div>
</template>

export default {
  data() {
    return {
      fileList: [
        {
          url: 'https://img01.yzcdn.cn/vant/leaf.jpg',
          status: 'uploading',
          message: '上传中...',
        },
        {
          url: 'https://img01.yzcdn.cn/vant/tree.jpg',
          status: 'failed',
          message: '上传失败',
        }
      ]
    };
  },
  methods: {
    afterRead(fileObj) {
      // 上传状态
      fileObj.status = 'uploading';
      // 状态提示
      fileObj.message = '上传中...';
      // 声明form表单数据
      const formData = new FormData();
      // 添加文件信息
      formData.append('file', fileObj.file);
      // 上传接口调用
      api.uploadFile(formData).then(res => {
        // 上传成功
        fileObj.status = 'done';
        // 存储返回数据
        fileObj.addInfo = res.data;
      }).catch(() => {
        // 上传失败
        fileObj.status = 'failed';
        // 失败状态提示
        fileObj.message = '上传失败';
      });
    }
  }
};

3.修改上传文件类型、大小：

<template>
  <div>
    <!-- accept：允许上传的文件类型，默认为图片类型文件 -->
    <!-- accept=""  全部文件类型 -->
    <van-uploader accept="" />
    <!-- max-size：限制上传文件的大小，超过大小的文件自动过滤 -->
    <!-- oversize：获取自动过滤的文件信息 -->
    <van-uploader :max-size="500 * 1024" @oversize="onOversize" />
  </div>
</template>

export default {
  methods: {
    onOversize(file) {
      console.log(file);
      this.$toast('文件大小不能超过 500kb');
    },
  },
};

4.文件展示：

可以调用后台接口，获取数据库存储数据

<template>
  <div>
    <!-- show-upload:是否展示上传区域 -->
    <!-- show-upload:是否展示删除按钮 -->
    <van-uploader v-model="fileList" 
        :show-upload="false"
        :deletable="false"
    />
  </div>
</template>

export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    file() {
      // 调用详情接口
      this.getDetail(params).then((res) => {
        // 遍历返回信息
          res.data.forEach(item => {
            // 显示文件数组赋值
            this.fileList.push({
              // 文件
              file: {
                // 文件名称，用来展示列表
                name: item.fileName
              },
              // 存储返回数据
              addInfo: item
            });
          });
        }).catch(() => {
          // 弹出错误提示
          this.$toast.fail('服务异常，获取附件失败');
        });
    }
  },
};

5.文件下载：

调用后台接口，点击允许下载文件

<template>
  <div>
    <!-- click-preview:点击预览图时触发 -->
    <!-- preview-full-image:是否在点击预览图后展示全屏图片预览 -->
    <van-uploader @click-preview="downHandle" 
        v-model="fileList" 
        :preview-full-image="false"
    />
  </div>
</template>

export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    /**
     * 下载文件
     */
    downHandle(fileObj) {
      // 声明a标签
      const aEle = document.createElement('a');
      // 设置下载文件名
      aEle.download = fileObj.file.name;
      // 判断是详情返回的数据还是自己上传的
      if (fileObj.fileId) {
        // 调用接口下载
        api.downloadFile({
          // 文件名
          fileName: fileObj.file.name
        }).catch(() => {
          // 弹出错误提示
          this.$toast.fail('服务异常，下载失败');
        });
      } else {
        // 下载地址
        aEle.href = fileObj.content;
        // 调用下载
        aEle.click();
      }
    },
};