templates/upload_chunks.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  <title>大文件分片上传</title>
  <link href="/static/css/common.css" type="text/css" rel="stylesheet" />
  <!-- production -->
  <script type="text/javascript" src="/static/js/plupload.full.min.js"></script>
</head>

<body style="font: 13px Verdana; background: #eee; color: #333">
  <h1>大文件分片上传(每片 100kb)</h1>
  <div id="filelist">Your browser doesn't have HTML5 support.</div>
  <br />
  <div id="container">
    <a id="pickfiles" href="javascript:;">[Select files]</a>
    <a id="uploadfiles" href="javascript:;">[Upload files]</a>
  </div>
  <br />
  <pre id="console"></pre>
  <script type="text/javascript">
    // Custom example logic
    const uploader = new plupload.Uploader({
      runtimes: 'html5',
      browse_button: 'pickfiles', // you can pass an id...
      container: document.getElementById('container'), // ... or DOM Element itself
      url: '/api/file_chunk_upload',
      // 每片文件的大小
      chunk_size: '100kb',
      filters: {
        // max_file_size : '10mb',
        mime_types: [{
          title: "Image files",
          extensions: "jpg,gif,png,jpeg"
        },
        {
          title: "Zip files",
          extensions: "zip"
        }
        ]
      },
      init: {
        PostInit: function () {
          document.getElementById('filelist').innerHTML = '';

          document.getElementById('uploadfiles').onclick = function () {
            uploader.start();
            return false;
          };
        },
        FilesAdded: function (up, files) {
          plupload.each(files, function (file) {
            document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' +
              plupload.formatSize(file.size) + ') <b></b></div>';
          });
        },
        UploadProgress: function (up, file) {
          document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent +
            "%</span>";
        },
        FileUploaded: function (up, file, result) {
          console.log(up, file, result)
          try {
            const res = JSON.parse(result.response)
            console.log(res)
            document.getElementById(file.id).append(res.data.url)
          } catch (error) {

          }
        },
        Error: function (up, err) {
          document.getElementById('console').appendChild(document.createTextNode("\nError #" + err.code + ": " +
            err.message));
        }
      }
    });
    uploader.bind('ChunkUploaded', function (up, file, info) {
      // do some chunk related stuff
      console.log(info)
    });

    uploader.init();
  </script>
</body>

</html>