vue-simple-uploader的使用

浮玉
8,015 阅读3分钟

业务场景

进行文件夹的上传，且项目要支持上传大文件，elementUI并不支持上传文件夹，所以使用vue-simple-uploader。

vue-simple-uploader的优点

vue-simple-uploader是基于simple-Uploader.js封装的上传组件，具有以下优点：

  • 支持文件、多文件、文件夹上传；支持拖拽文件、文件夹上传
  • 可暂停、继续上传
  • 错误处理
  • 支持“秒传”，通过文件判断服务端是否已存在从而实现“秒传”
  • 分块上传
  • 支持进度、预估剩余时间、出错自动重试、重传等操作 文档：simple-uploder.js文档 vue-simple-uploader:github.com/simple-uplo…

vue-simple-uploader的安装

安装：npm install vue-simple-uploader --save

在main.js中使用

import uploader from 'vue-simple-uploader';
Vue.use(uploader);

配置选项

options: {
        target: 'http://localhost:8080', // SpringBoot后台接收文件夹数据的接口
        simultaneousUploads: 10, // 支持同时上传数量
        autoStart: false, // 自动上传
        panelShow: false,
        allowDuplicateUploads: false, // 上传过得文件不可以再上传
        testChunks: false, // 是否分片-不分片
        chunkSize: '102400000000',//块大小
        //query参数是带有数据的post的额外参数，policy、OSSAccessKeyId和signature是获取到的后端签名返回，success_action_status需设置为 200
        query: (file) => {
          
          return {
            name: file.name,
            key: file.key,
            policy,
            OSSAccessKeyId: accessId,
            signature,
            success_action_status: 200,
          };
        },
      }

常用的方法

(1).assignBrowse(domNodes, isDirectory, singleFile,attributes )，封装组件时，你用到的按钮可能不是组件上传的按钮，这时候你就需要把按钮绑定成上传的按钮，这时候就需要操作DOM

  • domNodes:节点的数组或者单个节点
  • isDirectory: 是不是文件夹，接收boolean值
  • singleFile: 为了防止多个文件上传，设置为true
  • attributes:通过键和值的对象设置输入字段的自定义属性 (2).getSize(): 获取上传文件的总大小

(3).progress():获取上传文件的进度，返回0-1之间的浮点数

(4).addFile(file):添加一个H5对象到文件列表

常用的事件

  • .fileAdded(file, event): 用于文件的验证，可以判断可接受的文件类型，不支持的格式会返回false,拒绝上传，添加文件时，同样也可使用浏览器的event对象
  • .filesAdded(files, fileList, event): 和.fileAdded相同，不过是用于多文件的验证
  • .fileSuccess(rootFile, file, message, chunk):完成一个特定的文件上传，rootFile是根文件夹，file是要上传的文件对象，message是服务器返回的响应信息，第四个参数' chunk '是' Uploader.Chunk '的实例。
  • .complete():所有的文件都上传成功
  • .fileProgress(rootFile): 获取文件上传的进度,rootFile是所有文件
  • .fileError(rootFile, file, message, chunk):特定的文件上传失败，可在这个回调函数中给用户提示

总结

  • 方法里面最常使用的就是.assignBrowse()，因为你需要绑定需要上传的按钮，如果是个表格每个都有的话，你需要给每一项唯一标识，知道是哪一行在上传
  • 事件的话就是fileAdded、fileSuccess、fileProgress这些比较常用，complete是所有文件上传成功后才会调用
  • 如果不需要上传文件夹和大文件的话，建议使用element-ui就行
avatar
文章
阅读
粉丝