javascript - Safari 在通过 FormData 上传文件时将空文件发送到服务器

Question

我们正在尝试上传经过裁剪的图像 blob。

以下代码适用于 Chrome 和 Firefox，但我们在使用 Safari 时遇到问题。

File 在附加到 FormData 之前看起来格式正确，不幸的是 Safari 没有提供足够的支持来查看附加到 FormData< 的文件

我们的问题是，一旦它被发送到我们的服务器转储 var_dump( $_FILES['file'] ) 显示文件为空(它的大小属性为 0)。

我认为这是 Safari 对 FormData 的“基本”支持，但我尝试使用的 Polyfillers 并未解决该问题。有解决办法吗？

// From Controller
$scope.uploadImage = function( croppedImage ) {
  $scope.uploadingImage = true;
  var imageBlob = dataURItoBlob( croppedImage );
  var options = {
    action: 'upload_file',
    format: 'media_item',
    output: 'json'
  }

  var file = new File( [ imageBlob ], $scope.filename,{
    type: 'image/png'
  });

  console.log( file.size );

  MediaService.uploadImage( file, options ).then(
    function( response ) {
      $modalInstance.close( response );
    }
  ).finally(
    function() {
      $scope.uploadingImage = false;
    }
  )
};

// From MediaService (angular service
uploadImage: function( image, params ){
  var formData = new FormData();
  formData.append( 'action', params.action );
  formData.append( 'format', params.format);
  formData.append( 'file', image );

  //The POST header needs to be multipart/form-data
  $http.defaults.headers.post = {};

  return $http( {
    method: 'POST',
    url: apiMediaUrl,
    data: formData,
    transformRequest: angular.identity,
    headers: { 'Content-Type': undefined },
    withCredentials: true
  } )
  .then(
    function( response ) {
      return response.data.payload;
    },
    function( errorResponse ) {
      throw errorResponse.data.payload || errorResponse.data;
    }
  );
}

Answer 1

经过一天的努力，终于搞定了。

通过发送 imageBlob 而不是创建 new File 到 MediaService 并附加文件名。

所以

// From Controller
$scope.uploadImage = function( croppedImage ) {
  $scope.uploadingImage = true;
  var imageBlob = dataURItoBlob( croppedImage );
  var options = {
    action: 'upload_file',
    format: 'media_item',
    output: 'json',
    params: 'filename'
  }

  // no longer convert to file

  MediaService.uploadImage( imageBlob, options ).then(
    function( response ) {
      $modalInstance.close( response );
    }
  ).finally(
    function() {
      $scope.uploadingImage = false;
    }
  )
};

// From MediaService (angular service
uploadImage: function( image, params ){
  var formData = new FormData();
  formData.append( 'action', params.action );
  formData.append( 'format', params.format);

  /*
   *  Add file name here
   */
  formData.append( 'file', image, params.filename );

  //The POST header needs to be multipart/form-data
  $http.defaults.headers.post = {};

  return $http( {
    method: 'POST',
    url: apiMediaUrl,
    data: formData,
    transformRequest: angular.identity,
    headers: { 'Content-Type': undefined },
    withCredentials: true
  } )
  .then(
    function( response ) {
      return response.data.payload;
    },
    function( errorResponse ) {
      throw errorResponse.data.payload || errorResponse.data;
    }
  );
}