文件上传是前端开发很常用的一个功能, 通常文件上传都是异于表单提交, 使用起来配置繁多, 校验不统一, 展示不统一。

效果对比

特点

1. 简化使用
2. 数据双向绑定
3. 样式统一
4. 带预览和下载功能

依赖

1. 封装的组件 FileViewDialog (文件预览与下载,不需要此功能的话,可删除)

2. 文件返回接口如果加密了, 则需要解密, 安装依赖 npm install crypto-js -S, 修改 上传成功回调

   // 上传成功回调
    handleUploadSuccess(res, file) {
      res = JSON.parse(Decrypt(res)) // 需要解密的话, 此处解密 !!!
    }

3. 在 ZUploader/const.js 常量文件中,

   1. 引入项目公共的加解密方法 Decript 和 Encrypt
   2. 引入项目公共的获取 token方法, 请求头所需要的 AuthorizeToken ( 必填 )
   3. 定义 上传的服务器地址 uploadUrl ( 必填 )

 使用

1. 将下方 ZUploader 压缩包解压放到 /src/components 目录下

import ZUploader from '@/components/ZUploader'
Vue.component('ZUploader', ZUploader)

2. 使用

<ZUploader v-model="fileList"></ZUploader>

❤️ 组件接收的 属性有

props: {
   // 绑定的值, 可以是文件地址拼接的字符串, 可以是数组
    value: [String, Array],
    // 表示上传组件的类型, 可以是 image 和 file , 默认 image
    type: { type: String, default: 'image'},
    // 文件对象里 name 的 key
    nameKey: { type: String, default: 'name' },
    // 文件对象里的 url 的 key
    urlKey: { type: String, default: 'url' },
    // 图片数量限制 默认 5 个
    limit: { type: Number, default: 5 },
    // 大小限制(MB)
    fileSize: { type: Number, default: 10 },
    // 文件类型, 例如['png', 'jpg', 'jpeg']
    fileTypes: { type: Array },
    // 是否显示提示 默认开启
    isShowTip: { type: Boolean, default: true },
    // 提示信息的内容重写
    tipContent: { type: String, default: '' },
    // 控制tip是否为行内式, 在上传按钮右边
    isTipRight: { type: Boolean, default: false },
    // 是否禁用
    disabled: { type: Boolean },
    // 设置picture-card 宽高 默认 100px
    width: { type: String, default: '100px' },

    // 按钮内容
    btnText: { type: String, default: '点击上传' },
    // 上传的文件字段名
    fileKey: { type: String, default: 'file' },
    // 是否开启拖拽
    drag: { type: Boolean, default: false },
    // 是否开启自定义模板
    isCustomTemp: { type: Boolean, default: false },
},

❤️ ❤️ props 属性值 特别说明

• value 有 三种 有效值

格式一: 'url1,url2,url3'
格式二: ['url1','url2','url3']
格式三: [{name:'name1',url:'url1'},{name:'name2',url:'url2'},{name:'name3',url:'url3'}]

• type 可选值有 image 和 file

• fileTypes 文件选择弹框过滤的文件类型集合 

为 `image`时,`fileTypes`默认值 ['png','jpg','jpeg']
为 `file`时,`fileTypes` 默认值 ['doc','docx','xls','xlsx','ppt','txt','pdf','png','jpg','jpeg','rar','zip']

 

• isShowTip 是否显示提示 (当上传被 disabled 禁用时, 提示不显示)

• tipContent 自定义提示信息, 可以是字符串模板 会被解析

• isTipRight 控制 tip 是否为行内式, 在上传按钮右边

• disabled 禁用上传, 只可查看文件

• width 针对 type 为 image 是后, 调整图片大小

• drag 是否开启拖拽

•  isCustomTemp 是否开启自定义模板

  // 此时需要 type 为 file 类型, 通过作用域插槽, 将文件列表传递出来, 可以写自定义的展示模板
  
  <ZUploader v-model="fileList" @change="fileChange" type="file" isCustomTemp>
    <div slot-scope="{ data }" style="display: flex">
      <div style="color: red" @click="checkFile(data)">{{ data.name }}</div>
      <i class="el-icon-close" @click="removeItem(data.url)"></i>
    </div>
  </ZUploader>

  export default {
    data() {
      return {
        fileList: [
          {
            name: 'logo111.png',
            url: 'https://www.yjgygl.com/group1/default/20230417/08/45/4/7bc28997bf27751067e44867f113aeeb.png',
          },
        ],
      }
    },
    methods: {
      // 文件改变的回调
      fileChange(val) {
        console.log('fileChange: ', JSON.stringify(val))
      },
      // 预览
      checkFile(item) {
        this.$refs.uploadRef.handleFilePreview(item)
      },
      // 移除某一项
      removeItem(url) {
        const ind = this.fileList.findIndex((i) => i.url === url)
        this.fileList.splice(ind, 1)
      },
    },
  }