자른 이미지의 윤곽을 업로드하려고합니다.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;
}
);
}
다음 작업을 console.log'의 결과를 제공하지 않을 경우 (MediaService.uploadImage (imageBlob, 옵션)''에''imageBlob을 MediaService.uploadImage (파일, 옵션)을 변경하려고)'와'console.log (file)' –
하, 우리는 문자 그대로 방금 이것을 얻었습니다. 이전에 우리의 API는 그들을 거부했습니다. 그러나 만약 우리가'uploadImage'에 파일 이름과'formData.append ('file', image, filename);을 전달하면 그것은 작동합니다. 운동하기 다른 몇 가지 꼬임,하지만 그들은 쉽게해야합니다. 감사합니다. – James
그래서 문제가 해결 되었습니까? –