vue-simple-uploader 入门，python后端接口的实现

继续上一篇 vue-simple-uploader 入门

实现思路：

  vue-simple-uploader 组件会接文件切片后，按片上传，后端接口分片接受后保存。
  前端完成一个文件的全部切片上传后，给后端发消息，后端收到消息后，将所有切片文件合并为一个文件。

实现步骤：

1. 将app.vue 使用 vue-simple-uploader 组件的代码，放在项目vue_uploader的hello.vue文件中，实现效果相同。需要留意一下@file-complete="fileComplete"，后面会重新这个方法，实现文件切片的合并。

2. 修改文件上传调用的接口地址

    options : {
             target : '//localhost:3000/upload',
             testChunks : false
           },
   

   target 目标上传 URL，可以是字符串也可以是函数，如果是函数的话，则会传入 Uploader.File 实例、当前块 Uploader.Chunk 以及是否是测试模式，默认值为 ‘/’。
   testChunks 是否测试每个块是否在服务端已经上传了，主要用来实现秒传、跨浏览器上传等，默认 true。

3. 修改转换文件上传状态文本映射对象

    statusText : {
        success : '成功了',
        error : '出错了',
        uploading : '上传中',
        paused : '暂停中',
        waiting : '等待中'
    }
   

   默认值：

    {
      success: 'success',
      error: 'error',
      uploading: 'uploading',
      paused: 'paused',
      waiting: 'waiting'
    }
   

4. 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))
     

5. 再次运行项目代码，选择文件进行上传后，这时可以在指定的 local_package_root 路径下看到有文件切片：

6. 前端 实现 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);
       })
     }
   

7. 后端 完成文件切片 合并

   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

结束！