使用方法`slice`在Cordova部分上传文件答案

【问题标题】：upload the file in parts of Cordova using method `slice`使用方法`slice`在Cordova部分上传文件
【发布时间】：2014-07-23 13:02:37
【问题描述】：

请告诉我如何在 Cordova 部分地区上传文件。我知道可以使用 `slice` 方法来完成（官方网站上没有完整的示例）。不知道怎么弄，整个文件都上传了。

代码：

函数uploadFileToServ(fileURI) { window.resolveLocalFileSystemURL(fileURI, successGetFileFromLocal, failGetFileFromLocal);

    function successGetFileFromLocal(fileEntry) {
        fileEntry.file(successFile, failFile);
        function successFile(fileObj) {
            var localURL = fileObj.localURL,
                fileName = fileObj.name;

            var slicedFile = fileObj.slice(0, 1000000);

            var options = new FileUploadOptions();
            options.fileKey = "my_video";
            options.fileName = fileName;
            options.mimeType="video/mp4";
            var params = {};
            params.meeting_id = meeting_id;
            options.params = params;
            options.chunkedMode = false;

            var ft = new FileTransfer();

            ft.upload(localURL, encodeURI(window.host + "/myserver/mobile/uploadFile), successUploadFileToServ, failUploadFileToServ, options);
        }
    }
}

如何使该部分从 0 上传到 1Mb？

谢谢！

【问题讨论】：

我也有同样的问题。如果您决定请写出结果。

标签： cordova cordova-3

【解决方案1】：

试试这个

import { IFile } from '@ionic-native/file';

readChunk(file: IFile, chunkIndex: number, chunkSize: number = 1024): Promise<Blob> {

    return new Promise<Blob>((resolve, reject) => {
        const reader = FileReaderHelper.getFileReader();

        reader.onloadend = () => {
            resolve(new Blob([reader.result]));
        };

        reader.onerror = reject;

        reader.readAsArrayBuffer(
            file.slice(chunkIndex * chunkSize, (chunkIndex + 1) * chunkSize)
        );
    });
}

【讨论】：

【解决方案2】：

看这个：

<style>
  #byte_content {
    margin: 5px 0;
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  #byte_range { margin-top: 5px; }
</style>

<input type="file" id="files" name="file" /> Read bytes: 
<span class="readBytesButtons">
  <button data-startbyte="0" data-endbyte="4">1-5</button>
  <button data-startbyte="5" data-endbyte="14">6-15</button>
  <button data-startbyte="6" data-endbyte="7">7-8</button>
  <button>entire file</button>
</span>
<div id="byte_range"></div>
<div id="byte_content"></div>

<script>
  function readBlob(opt_startByte, opt_stopByte) {

    var files = document.getElementById('files').files;
    if (!files.length) {
      alert('Please select a file!');
      return;
    }

    var file = files[0];
    var start = parseInt(opt_startByte) || 0;
    var stop = parseInt(opt_stopByte) || file.size - 1;

    var reader = new FileReader();

    // If we use onloadend, we need to check the readyState.
    reader.onloadend = function(evt) {
      if (evt.target.readyState == FileReader.DONE) { // DONE == 2
        document.getElementById('byte_content').textContent = evt.target.result;
        document.getElementById('byte_range').textContent = 
            ['Read bytes: ', start + 1, ' - ', stop + 1,
             ' of ', file.size, ' byte file'].join('');
      }
    };

    var blob = file.slice(start, stop + 1);
    reader.readAsBinaryString(blob);
  }

  document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
    if (evt.target.tagName.toLowerCase() == 'button') {
      var startByte = evt.target.getAttribute('data-startbyte');
      var endByte = evt.target.getAttribute('data-endbyte');
      readBlob(startByte, endByte);
    }
  }, false);
</script>

来自：http://www.html5rocks.com/en/tutorials/file/dndfiles/

【讨论】：