2017-10-04 4 views
1

자른 이미지의 윤곽을 업로드하려고합니다.Safari가 서버에 빈 파일 보내기 FormData를 통한 파일 업로드

다음 코드는 Chrome 및 Firefox에서 작동하지만 Safari와 관련하여 문제가 있습니다.

File는 한 번 우리의 문제가있는 FormData

에 첨부 된 파일을 볼 수있는 충분한 지원을 제공하지 않습니다 FormData 불행하게도 사파리에 추가하기 전에 잘 형성에 나타나는 우리의 서버가 var_dump($_FILES['file'])을 덤핑에 전송 된 후에는 비어있는 파일을 보여줍니다 (size 속성은 0입니다).

저는 이것이 사파리의 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; 
    } 
); 
} 
+0

다음 작업을 console.log'의 결과를 제공하지 않을 경우 (MediaService.uploadImage (imageBlob, 옵션)''에''imageBlob을 MediaService.uploadImage (파일, 옵션)을 변경하려고)'와'console.log (file)' –

+0

하, 우리는 문자 그대로 방금 이것을 얻었습니다. 이전에 우리의 API는 그들을 거부했습니다. 그러나 만약 우리가'uploadImage'에 파일 이름과'formData.append ('file', image, filename);을 전달하면 그것은 작동합니다. 운동하기 다른 몇 가지 꼬임,하지만 그들은 쉽게해야합니다. 감사합니다. – James

+0

그래서 문제가 해결 되었습니까? –

답변

1

내 머리카락을 꺼내서 하루를 마침내 얻었습니다.

new File을 MediaService에 추가하는 대신 imageBlob을 보내면 파일 이름이 추가됩니다.

그래서

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