Question

我们正在尝试上传已被裁剪的图像的斑点。

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

File在FormData被附加到FormData之前似乎已经很好地形成了很遗憾，一旦附加到var_dump( $_FILES['file'] )

，Safari就无法提供足够的支持来查看该文件

我们的问题是，一旦它被发送到我们的服务器，转出// 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; } ); }显示该文件为空（它的size属性为0）。

我相信这会降低Safari对FormData的“基本”支持，但我尝试使用的Polyfillers还没有解决问题。有办法解决这个问题吗？

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content">

<ImageView
    android:marginLeft="18dp"
    android:marginRight="18dp"
    android:id="@+id/logoImageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="fitXY"
    android:adjustViewBounds="true" />
  </LinearLayout>

Answer 1

经过一天拔头发后，终于明白了。

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

所以

// 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;
    }
  );
}

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

1 个答案: