Vue-cmobile-fileupload NPM

fileupload

usage

  npm i vue-cmobile-fileupload --save

  <template><file-upload /></template>
  <script>
    import fileUpload from 'vue-cmobile-fileupload'
    ...
    components: { fileUpload }
    ...
  <script>

  // webpack.config.js  or place the js-floder in your static directory 'node_modules/vue-cmobile-fileupload/dist/static'
  // if u need：npm i CopyWebpackPlugin -D
  const CopyWebpackPlugin = require('copy-webpack-plugin')
  ...
  plugins: [
    ...
     new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, 'node_modules/vue-cmobile-fileupload/dist/static'),
        to: 'static',
        ignore: ['.*']
      }
    ])
    ...
  ]

  // config
  // options for worker.js
  options = {
    size: 10 * 1024 * 1024 // 分片大小
    customHash: '' // 自定义切片后缀
  }

  // fileOptions for uploadComponent 具体配置查看elementui upload组件
  fileOptions = {
    fileList: [], // 文件列表
    multiple: false, // 多选开关
    showFileList: true, // 是否展示文件列表
    drag: false, // 是否拖拽
    accept: '', // 接收文件类型
    limit: 1, // 多选时限制选择个数
    disabled: false // 是否禁用
  }

  // httpOptions
  httpOptions = {
    checkFile: { // 检查文件是否已上传
        url: 'http://172.16.1.139:9527/bigfile/verify',
        method: 'get'
      },
      checkBreakpoint: { // 检断点
        url: 'http://172.16.1.139:9527/bigfile/verify',
        method: 'get'
      },
      uploadFile: { // 上传分片
        url: 'http://172.16.1.139:9527/bigfile/upload',
        method: 'post'
      },
      mergeFile: { // 通知服务器合并文件
        url: 'http://172.16.1.139:9527/bigfile/integration',
        method: 'post'
      }
  }

  // functions 部分用法同elementui
  @preview
  @change
  @beforeUpload
  @remove
  @request
  @exceed
  
  // 自定义上传方法
  @checkFile // 返回值为false表示文件已上传
  @checkBreakpoint // 返回promise，传递的值为需要上传的切片数组
  @uploadPiecesFunc // 自定义切片上传方法，返回promise
  @uploadFile // 切片上传接口的回调
  @mergeFile // 合并文件接口的回调