ZUploader 之 文件上传

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

效果对比

特点

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 , 默认 imagetype: { type: String, default: 'image'},// 文件对象里 name 的 keynameKey: { type: String, default: 'name' },// 文件对象里的 url 的 keyurlKey: { 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 宽高 默认 100pxwidth: { 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)},},
  }