ZUploader 之文件上传

最新推荐文章于 2024-11-01 17:01:39 发布

寒寒_

最新推荐文章于 2024-11-01 17:01:39 发布

阅读量801

点赞数 21

分类专栏： Vue2 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_42079403/article/details/142463002

版权

Vue2 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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

效果对比

特点

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

依赖

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

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

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

在 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)
    },
  },
}