[php] input file 이미지 파일 blob으로 바꿔 업로드하기.

흔히들 보는 이미지 업로드 방식은 바로 input을 이용한 방식일 것이다.

<input type='file' name='file' id='file' />
<input type='submit' id='submit' />

대충 만들었다.

다들 이렇게 해서 파일을 보내리라고 본다.

내가 기존에 작성한 toast ui 업로드 방식에서 이미지서버가 아닌 move file을 이용한 업로드를 구현해야했다.

그러다보니 기존 blob을 사용해야하는데 input에서는 작동하지 않는다....

 

이를 위해서 blob으로 바꿔줘야 했다.

let file = $('#file').prop("files")[0]; // input file에서 데이터 뽑는 방법
let tmp = new Blob([file], { type: `${file.type}` }); // 타입은 동적으로 보내서 감지할 수 있게 했음.
let formData = new FormData();
formData.append('tmp', tmp);
formData.append('fileNAME', file.name);
// blob을 했더니 파일명이 날라가서 blob이 이름이 되는 문제가 있더라.
// 해결 방법을 몰라 따로 이름을 보내줘야 했다.

JS단 내역

let file = $('#file').prop("files")[0];
let tmp = new Blob([file], { type: `${file.type}` });
let formData = new FormData();
formData.append('tmp', tmp);
formData.append('fileNAME', file.name);
$.ajax({
  url: `보내야 하는 php`,
  data: formData, // 객체로 보내려했더니 파일이 아예 안날라가길래 그냥 formData에 다 때려 박는식으로 해결.
  type: 'post',
  enctype: 'multipart/form-data',
  contentType: false,
  processData: false,
  async: false,
})
.done(function(data) {
  let ret = JSON.parse(data);
  if(ret.check == "Y") {
  alert('업로드에 성공하였습니다.');
  location.href = '해당 페이지로 이동.';
  return;
  } else {
    alert(ret.message);
    return;
  }
})
.fail(function(err) {
	alert(err);
});

 

php파일에서 받는 방식은

$fileNAME = $_POST['fileNAME'];

그냥 POST로 받으면 된다.

파일만 따로 $_FILES로 받으면 되고...

리눅스에서 동일한 이름으로 덮어쓰기하려하는데, 안되면 권한문제...

643인가 644이라 권한으로 되어 있어, 덮어쓰기가 안되었던 문제가 있었다.

 

참고자료

https://heropy.blog/2019/02/28/blob/

Blob(블랍) 이해하기