使用vue-simple-uploader进行文件夹上传

1.vue

1.1template

复制代码
<uploader :options="options" :file-status-text="statusText" class="uploader-example" ref="uploader" :autoStart="false" @file-complete="fileComplete">
  <uploader-unsupport></uploader-unsupport>
  <uploader-drop>
    <uploader-btn :directory="true" style="background-color: #79BBFF">
      <i class="el-icon-folder-add" style="margin-right: 5px"></i>上传文件夹
    </uploader-btn>
  </uploader-drop>
  <uploader-list></uploader-list>
</uploader>
<el-button type="primary" @click="submitUpload">开始上传</el-button>
复制代码

 

1.2export->data

复制代码
options: {
  target: https.baseURL + urls.folderUpload,
  maxChunkRetries: 3,
  testChunks: false,
  fileParameterName: "contents",
  chunkSize: 1024 * 1024 * 10,
  simultaneousUploads: 3,
  headers: {},
  query: {
    folder: this.folder
  }
},
statusText: {
  success: "上传成功",
  error: "上传失败",
  uploading: "上传中",
  paused: "暂停中",
  waiting: "等待中"
}
复制代码

1.3export->methods

复制代码
async fileComplete() {
  for (let i = 0; i < arguments[0].files.length; i++) {
    await https.POST(urls.sliceMerging, { folder: this.folder, ...arguments[0].files[i] });
  }
},
submitUpload() {
  let self = this;
  this.$nextTick(() => {
    for (var i = 0; i < self.$refs.uploader.files.length; i++) {
      self.$refs.uploader.files[i].resume();
    }
  });
}
复制代码

1.4style

复制代码
.uploader-example {
  width: 90%;
  padding: 15px;
  margin: 0 auto 0;
  font-size: 14px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

.uploader-example .uploader-btn {
  margin-right: 8px;
  color: #ffffff;
  border: #ffffff;
}

/deep/ .uploader-example .uploader-list {
  max-height: 300px;
  overflow: auto;
  overflow-x: hidden;
  overflow-y: auto;

  .uploader-file[status="uploading"] > .uploader-file-info {
    > .uploader-file-status > span > i {
      visibility: hidden;
    }

    > .uploader-file-status > span > em {
      visibility: hidden;
    }
  }
}
复制代码

2.python

复制代码
@system.route('/folderUpload', methods=['POST'])
def folder_upload():
    upload_file = request.files['contents']
    # 文件根目录
    folder = request.form.get('folder')
    local_package_root = f'./Libs{folder}'
    if not os.path.isdir(local_package_root):
        os.makedirs(local_package_root)
    # 文件名称
    task = request.form.get('identifier')
    chunk = request.form.get('chunkNumber')
    filename = f'{task}{chunk}'
    # 文件存储
    upload_file.save(f'{local_package_root}/{filename}')
    return JsonResponse.success('OK')


@system.route('/sliceMerging', methods=['POST'])
def slice_merging():
    params = request.get_json()
    # 文件名称
    target_filename = params.get('name')
    # 文件目录
    folder = params.get('folder')
    name_size = len(target_filename) + 1
    target_folder = params.get('relativePath')[:-name_size]
    local_package_root = f'./Libs{folder}'
    # 目标存储目录
    local_target_root = f'{local_package_root}/{target_folder}'
    if not os.path.isdir(local_target_root):
        os.makedirs(local_target_root)
    # 文件合并
    task = params.get('uniqueIdentifier', '')
    file_path = f'{local_target_root}/{target_filename}'
    # 分片序号
    chunk = 1
    with open(file_path, 'wb') as target_file:
        while True:
            try:
                filename = f'{local_package_root}/{task}{chunk}'
                source_file = open(filename, 'rb')
                target_file.write(source_file.read())
                source_file.close()
            except IOError:
                break
            chunk += 1
            os.remove(filename)
    return JsonResponse.success('OK')
复制代码

3.说明

复制代码
<uploader
  :options="options"
  @file-success="onFileSuccess"
  @file-complete="onFileComplete"
  @file-progress="onFileProgress"
  @file-added="onFileAdded"
  @files-added="onFilesAdded"
  @files-submitted="onFilesSubmitted"
  @file-removed="onFileRemoved"
  @file-retry="onFileRetry"
  @file-error="onFileError"
  @upload-start="onUploadStart"
  @complete="complete"
>
  <uploader-unsupport></uploader-unsupport>
  <uploader-drop>
    <uploader-btn>
      上传文件
    </uploader-btn>
    <uploader-btn :directory="true">
      上传文件夹
    </uploader-btn>
  </uploader-drop>
  <uploader-list></uploader-list>
</uploader>
复制代码
复制代码
// 组件实例化时传入的配置项
options: {
  // 目标上传 URL，可以是字符串也可以是函数，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk 以及是否是测试模式
  target: '',
  // 单文件上传。覆盖式，如果选择了多个会把之前的取消掉
  singleFile: false,
  // 分块时按照该值来分，最后一个上传块的大小是可能是大于等于1倍的这个值但是小于两倍的这个值大小
  chunkSize: 1 * 1024 * 1024,
  // 是否强制所有的块都是小于等于 chunkSize 的值
  forceChunkSize: false,
  // 并发上传数
  simultaneousUploads: 3,
  // 上传文件时文件的参数名
  fileParameterName: 'file',
  // 其他额外的参数，这个可以是一个对象或者是一个函数，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk 以及是否是测试模式
  query: {},
  // 额外的一些请求头，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk 以及是否是测试模式
  headers: {},
  // 标准的 CORS 请求是不会带上 cookie 的，如果想要带的话需要设置 withCredentials 为 true
  withCredentials: false,
  // 当上传的时候所使用的是方式，可选 multipart、octet
  method: 'multipart/form-data',
  // 测试的时候使用的 HTTP 方法，可以是字符串或者函数，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk
  testMethod: 'GET',
  // 真正上传的时候使用的 HTTP 方法，可以是字符串或者函数，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk
  uploadMethod: 'POST',
  // 如果说一个文件已经上传过了是否还允许再次上传。默认的话如果已经上传了，除非你移除了否则是不会再次重新上传的
  allowDuplicateUploads: false,
  // 对于文件而言是否高优先级发送第一个和最后一个块。一般用来发送到服务端，然后判断是否是合法文件；例如图片或者视频的 meta 数据一般放在文件第一部分，这样可以根据第一个块就能知道是否支持
  prioritizeFirstAndLastChunk: false,
  // 是否测试每个块是否在服务端已经上传了，主要用来实现秒传、跨浏览器上传等
  testChunks: false,
  // 服务器分片校验函数 秒传及断点续传的基础(true:不用传 false:需要传)
  // checkChunkUploadedByResponse: (chunk, message) => {
  // 这里根据实际业务来 用来判断哪些片已经上传过了 不用再重复上传了 [这里可以用来写断点续传！！！]
  // return false
  // },
  // 可选的函数，每个块在测试以及上传前会被调用，参数就是当前上传块实例 Uploader.Chunk，注意在这个函数中你需要调用当前上传块实例的 preprocessFinished 方法
  preprocess: null,
  // 可覆盖默认的生成文件唯一标示的函数
  generateUniqueIdentifier: null,
  // 最大自动失败重试上传次数，值可以是任意正整数，如果是 undefined 则代表无限次
  maxChunkRetries: 2,
  // 重试间隔，值可以是任意正整数，如果是 null 则代表立即重试
  chunkRetryInterval: null,
  // 进度回调间隔
  progressCallbacksInterval: 500,
  // 主要用于计算平均速度，值就是从 0 到 1，如果是 1 那么上传的平均速度就等于当前上传速度，如果说长时间上传的话，建议设置为 0.02，这样剩余时间预估会更精确，这个参数是需要和 progressCallbacksInterval 一起调整的
  speedSmoothingFactor: 0.1,
  // 认为响应式成功的响应码
  successStatuses: [200, 201, 202],
  // 认为是出错的响应码
  permanentErrors: [404, 415, 500, 501],
  // 初始文件 paused 状态
  initialPaused: false,
  // 用于格式化你想要剩余时间，一般可以用来做多语言
  parseTimeRemaining: function (timeRemaining, parsedTimeRemaining) {
    // timeRemaining{Number}, 剩余时间，秒为单位
    // parsedTimeRemaining{String}, 默认展示的剩余时间内容
    return parsedTimeRemaining
      .replace(/\syears?/, '年')
      .replace(/\days?/, '天')
      .replace(/\shours?/, '小时')
      .replace(/\sminutes?/, '分钟')
      .replace(/\sseconds?/, '秒')
  }
},
// 是否选择文件后自动开始上传
autoStart: true,
statusText: {
  success: '成功',
  error: '失败',
  uploading: '上传中',
  paused: '暂停',
  waiting: '等待'
},
// 用于转换文件上传状态文本映射对象
fileStatusText: function (status, response) {
  // 第一个 status 为状态，第二个为响应内容
  const statusTextMap = {
    success: '成功',
    error: '失败',
    uploading: '上传中',
    paused: '暂停',
    waiting: '等待'
  }
  return statusTextMap[status]
},
// 添加到 input 元素上的额外属性
attrs: {}
复制代码
复制代码
/**
  * 事件
  * 一个文件上传成功
  *
  * @param {object} rootFile 成功上传的文件所属的根 Uploader.File 对象，它应该包含或者等于成功上传文件
  * @param {object} file 当前成功的 Uploader.File 对象本身
  * @param {object} message 服务端响应内容，永远都是字符串
  * @param {object} chunk Uploader.Chunk 实例，它就是该文件的最后一个块实例，如果你想得到请求响应码的话，chunk.xhr.status 就是
  */
onFileSuccess: function (rootFile, file, message, chunk) {
  console.log(`文件: ${file.name} 上传成功`)
},

/**
  * 事件
  * 一个根文件（文件夹）成功上传完成。
  */
onFileComplete: function (rootFile) {
  console.log('触发 onFileComplete 事件')
},

/**
  * 事件
  * 文件上传中触发
  */
onFileProgress (rootFile, file, chunk) {
  console.log(`上传中 ${file.name}，chunk：${chunk.startByte / 1024 / 1024} ~ ${chunk.endByte / 1024 / 1024}`)
},

/**
  * 事件:
  * 添加了一个文件，一般用做文件校验，如果设置 file.ignored = true 的话这个文件就会被过滤掉
  */
onFileAdded: function (file) {
  this.uploaderPanelShow = true
},

/**
  * 事件
  * 和 fileAdded 一样，但是一般用作多个文件的校验。
  */
onFilesAdded: function (files, fileList, event) {
  this.uploaderPanelShow = true
},

/**
  * 事件
  * 和 filesAdded 类似，但是是文件已经加入到上传列表中，一般用来开始整个的上传
  */
onFilesSubmitted: function (files, fileList, event) {
  console.log('触发 onFilesSubmitted 事件')
},

/**
  * 事件
  *  一个文件（文件夹）被移除
  */
onFileRemoved: function (file) {
  console.log(`文件: ${file.name} 删除成功`)
},

/**
  * 事件
  * 文件重试上传事件
  */
onFileRetry: function (rootFile, file, chunk) {
  console.log(`文件: ${file.name} 重试上传`)
},

/**
  * 事件
  * 文件上传出错
  */
onFileError: function (rootFile, file, message, chunk) {
  console.log(`文件: ${file.name} 上传出错`, message)
},

/**
  * 事件
  * 已经开始上传了
  */
onUploadStart: function () {
  console.log('触发 onUploadStart 事件')
},

/**
  * 事件
  * 上传完毕
  */
complete: function () {
  console.log('触发 complete 事件')
}
复制代码

 

posted @   漂上岸的鱼  阅读(4022)  评论(0)  编辑  收藏  举报
相关博文：
·  基于flask_socketio+vue-socket.io实现数据实时推送
·  vue支持docx文件预览
·  插件使用手册：vue-simple-upload 上传插件[支持文件、文件夹上传]
·  Vue使用vue-simple-uploader上传文件夹
·  vue-simple-uploader 常见问题整理
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
· 使用C#创建一个MCP客户端
点击右上角即可分享
微信分享提示
AI IDE Trae