vue-simple-uploader 入门,python后端接口的实现
继续上一篇 vue-simple-uploader 入门实现思路: vue-simple-uploader 组件会接文件切片后,按片上传,后端接口分片接受后保存。 前端完成一个文件的全部切片上传后,给后端发消息,后端收到消息后,将所有切片文件合并为一个文件。实现步骤:将app.vue 使用 vue-simple-uploader 组件的代码,放在项目vue_uploader的hello.vue
继续上一篇 vue-simple-uploader 入门
实现思路:
vue-simple-uploader 组件会接文件切片后,按片上传,后端接口分片接受后保存。
前端完成一个文件的全部切片上传后,给后端发消息,后端收到消息后,将所有切片文件合并为一个文件。
实现步骤:
-
将app.vue 使用 vue-simple-uploader 组件的代码,放在项目vue_uploader的hello.vue文件中,实现效果相同。需要留意一下
@file-complete="fileComplete"
,后面会重新这个方法,实现文件切片的合并。 -
修改文件上传调用的接口地址
options : { target : '//localhost:3000/upload', testChunks : false },
target
目标上传 URL,可以是字符串也可以是函数,如果是函数的话,则会传入 Uploader.File 实例、当前块 Uploader.Chunk 以及是否是测试模式,默认值为 ‘/’。
testChunks
是否测试每个块是否在服务端已经上传了,主要用来实现秒传、跨浏览器上传等,默认 true。 -
修改转换文件上传状态文本映射对象
statusText : { success : '成功了', error : '出错了', uploading : '上传中', paused : '暂停中', waiting : '等待中' }
默认值:
{ success: 'success', error: 'error', uploading: 'uploading', paused: 'paused', waiting: 'waiting' }
-
python实现切片上传接口:
-
查看文件上传接口传参。运行项目vue_uploader,打开页面后选择一个文件后,查看接口传参: 每一个上传块都会包含如下分块信息:
chunkNumber
: 当前块的次序,第一个块是 1,注意不是从 0 开始的。
totalChunks
: 文件被分成块的总数。
chunkSize
: 分块大小,根据 totalSize 和这个值你就可以计算出总共的块数。注意最后一块的大小可能会比这个要大。
currentChunkSize
: 当前块的大小,实际大小。
totalSize
: 文件总大小。
identifier
: 这个就是每个文件的唯一标示。
filename
: 文件名。
elativePath
: 文件夹上传的时候文件的相对路径属性。 -
后端 保存文件切片 的接口实现:
import os from flask import request from flask_restful import Resource class UploadApi(Resource): def post(self): upload_file = request.files['file'] task = request.form.get('identifier') # 获取文件唯一标识符 chunk = request.form.get('chunkNumber') # 获取该分片在所有分片中的序号 filename = '%s%s' % (task, chunk) # 构成该分片唯一标识符 # 存放路径 local_package_root = './' if not os.path.isdir(local_package_root): os.makedirs(local_package_root) print('上传文件 {} , 保存在 {}'.format(filename, local_package_root)) upload_file.save('%s/%s' % (local_package_root, filename))
-
-
再次运行项目代码,选择文件进行上传后,这时可以在指定的 local_package_root 路径下看到有文件切片:
-
前端 实现 fileComplete 方法,即当一个文件成功上传完成后的响应操作,这里我们让它调用后端的文件切片合并接口。先来看一下fileComplete方法获取的参数 arguments 中哪些数据可以使用:
可以根据 uniqueIdentifier 值找到对应的文件切片,所以将 arguments 的第一个值传递给后端使用。fileComplete () { console.log('file complete', arguments) let url = '//localhost:3000/upload'; this.$axios.get(url, {params:arguments[0]}) .then((res) => { console.log(url) if (res.data.code == 0) { this.$message.success('上传成功'); } else { this.$message.error('上传失败. ' + res.data.msg); return false } }).catch((err) => { this.$message.error('网络异常'); console.log(err); }) }
-
后端 完成文件切片 合并
class UploadApi(Resource): def get(self): # 存放路径 local_package_root = current_app.config.get("UPGRADE_PACKAGE_ROOT") if not os.path.isdir(local_package_root): os.makedirs(local_package_root) target_filename = request.args.get('name') # 获取上传文件的文件名 task = request.args.get('uniqueIdentifier') # 获取文件的唯一标识符 file_path = '{}/{}'.format(local_package_root, target_filename) chunk = 1 # 分片序号 with open(file_path, 'wb') as target_file: # 创建新文件 while True: try: filename = '%s/%s%d' % (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) # 删除该分片,节约空间
PS:
想了解更详细的 Uploader
用法,请参考 https://github.com/simple-uploader/Uploader/blob/develop/README_zh-CN.md
结束!
更多推荐
所有评论(0)