Question

我正在尝试使用HTML5视频标记录制视频（已经正常工作），使用“getUserMedia”访问设备摄像头，使用MediaRecorder API捕获帧，使用Angular1处理文件上传。现在我无法将Blob上传到我在Laravel上运行的PHP服务器，我目前有两种方式上传视频，首先是通过“ng-click”这很好用，但是当我以编程方式上传使用相同的Blob时“ng-click”运行的功能似乎打破了我的Blob的mimeType，这就是我的代码看起来的样子。

$scope.uploader = function() {
    let fData = new FormData();
    let blob = new Blob($scope.chunk, { type: 'video/webm' }); 
    fData.append('vid', blob)
    $http.post(url, fData, {
      transformRequest: angular.identity,
      headers: {'Content-Type': undefined},
    }, success, error)
})

$timeout(function() {
   $scope.uploader();
}, 10000)

这个问题是当使用“ng-click”调用“$ scope.uploader（）”时它工作正常但是当使用“$ timeout”调用“uploader”方法时，似乎将mimeType更改为“ application / octet-stream“导致问题。

Answer 1

您好试试这段代码，

function base64ToBlob(base64Data, contentType) {
   contentType = contentType || '';
   var sliceSize = 1024;
   var byteCharacters = atob(base64Data);
   var bytesLength = byteCharacters.length;
   var slicesCount = Math.ceil(bytesLength / sliceSize);
   var byteArrays = new Array(slicesCount);
   for (var sliceIndex = 0;sliceIndex <slicesCount;++sliceIndex) {
      var begin = sliceIndex * sliceSize;
      var end = Math.min(begin + sliceSize, bytesLength);
      var bytes = new Array(end - begin);
      for (var offset = begin, i = 0;offset <end;++i, ++offset) {
        bytes[i] = byteCharacters[offset].charCodeAt(0);
      }
      byteArrays[sliceIndex] = new Uint8Array(bytes);
   }
   return new Blob(byteArrays, {
    type: contentType});
}

定义范围

$scope.onFile = function(blob) {
    Cropper.encode((file = blob)).then(function(dataUrl) {
    $scope.dataUrl = dataUrl;
    $scope.odataUrl = dataUrl;
    $timeout(showCropper);  // wait for $digest to set image's src
   });
};

提交方法

 $scope.uploadImage = function () {

                if ($scope.myCroppedImage === '')
                {

                }
                $scope.msgtype = "";
                $scope.msgtxt = "";
                var fd = new FormData();
                var imgBlob = dataURItoBlob($scope.myCroppedImage);
                fd.append('clogo', imgBlob);
                fd.append('actionfile', 'editimage');
                $http.post(
                        '../user/user_EditCompany.php',
                        fd, {
                            transformRequest: angular.identity,
                            headers: {
                                'Content-Type': undefined
                            }
                        }
                )
                        .success(function (response) {
                            // console.log(response);
                            if (response.status == 'success')
                            {
                          //your code
                     }else{ 
                         //your code
                     }
                     })
                        .error(function (response) {
                            console.log('error', response);
                        });
            };

          function dataURItoBlob(dataURI) {
                var binary = atob(dataURI.split(',')[1]);
                var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
                var array = [];
                for (var i = 0; i < binary.length; i++) {
                    array.push(binary.charCodeAt(i));
                }
                return new Blob([new Uint8Array(array)], {
                    type: mimeString
                });
            }

Answer 2

谢谢，问题是由我的php.ini上传和发布限制造成的。

上传JavaScript Blob问题

2 个答案: