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 ( 必填 )