로컬서버 file upload구현

로컬서버 file upload구현

사용스택

next.JS, typeScript, sass, axios, formidable
추가. multer, next-connect
 

프론트에서 file input으로 data 받기

이미지 구현방식은 useRef로 DOM에 접근해서 이미지파일을 가져오고
onChange를 걸어서 이미지 미리보기가 자동으로 바뀌게 구현할 것 이다.
 
1) useRef로 DOM에 접근하여 file 데이터 받아오기
삭제하기를 누를시에 e.current.value를 삭제시켜서 파일 이름이 뜨지 않도록 한다.
 
2) onChange를 이용한 미리보기 구현
 
추가적으로 Blob을 base64로 변환시키는 코드도 구현해보았다
 
 

프론트에서 서버로 이미지 전송하기 (axios)

 

서버에서 이미지 받아서 저장하기

node.js에서는 multer를 사용했는데 next에서는 multer를 사용하기 어려웠다.
따라서 formidable를 사용하여 formData를 parse했다.
 
 
notion image
 
이미지를 서버로 보내면 지정된 path에 이미지 파일이 생긴것을 볼 수 있다.
단, 텍스트는 바로 파일로 저장되지않는다.
 

추가 multer 와 next-connect 를 사용한 middle ware구현

nextJS에서 express처럼 미들웨어를 구현하여 file parse를 하려고 공식문서를 찾아보았지만
 
nextJS의 내장 미들웨어는 res를 NextRequest 타입으로 받는데 서버 res는 타입을 NextApiRequest로 받아서
서로 타입이 안맞았다. nextJS 내장 미들웨어가 서버 api 미들웨어로는 부적합하다고 생각되어 다른 방식을 찾던중
 
next-connect라는 서드파티 미들웨어 라이브러리를 찾았다
next-connect를 쉽게 말하자면 nextJS를 express처럼 사용 할 수 있게 해준다
이를 적용한 코드이다.
 
client
 
 
server
파일위치는 src/api/upload.ts 이다
next-connect를 잘 사용한다면 미들웨어를 통하여 코드 재사용이 편할 것 같다. 공식 문서를 더 읽어볼 필요성을 느꼇다.
 
npm: next-connect
The method routing and middleware layer for Next.js (and many others). Latest version: 1.0.0, last published: 2 months ago. Start using next-connect in your project by running `npm i next-connect`. There are 39 other projects in the npm registry using next-connect.
npm: next-connect
https://www.npmjs.com/package/next-connect
npm: next-connect
 
 
 
참고
 
Video preview
with-typescript - CodeSandbox
with-typescript using react-image-lightbox, @rehooks/component-size, react-textfit, formik, buffer-to-data-url, next, react-sticky-mouse-tooltip, pngjs, ethers
with-typescript - CodeSandbox
https://codesandbox.io/s/with-typescript-wzgb7
with-typescript - CodeSandbox
axios 사용시 폼 데이터 전송하기 (+파일 업로드) | 두글 개발자 블로그
axios 의 post 기능은 기본적으로 폼 데이터 전송방식을 사용하지 않기 때문에 서버쪽에서 파라메터를 받는 부분을 수정할 수 없는 상황이라면 문제가 됩니다. 보통 외부 API 서비스를 사용할 때 많이 발생하지요. // 보통 axios 는 아래와 같이 보내게 된다. // 이렇게 보내면 폼 전송형식이 아닌 JSON 포맷으로 전송하게 된다. axios.post('https://domain/form-post-url', { name: '이름' key: '값' }).then((response) =>
axios 사용시 폼 데이터 전송하기 (+파일 업로드) | 두글 개발자 블로그
https://doogle.link/axios-사용시-폼-데이터-전송하기-파일-업로드/
axios 사용시 폼 데이터 전송하기 (+파일 업로드) | 두글 개발자 블로그
📁 Base64 / Blob / ArrayBuffer / File 다루기 총정리
웹 개발을 진행하다 보면 이진 데이터를 다루어야 할 때를 간혹 마주칠 수 있다. 브라우저에선 주로 파일 생성, 업로드, 다운로드 또는 이미지 처리와 관련이 깊고, 서버 사이드인 node.js 에선 파일 부터 버퍼 까지 원시 데이터를 다루는 상황이 있을 수 있다. 우리가 평소에 프로그래밍 하면서 직접 이진 데이터를 다루는 일은 별로 없다. 고급 언어를 사용해 프로그래밍 하기 때문에 사람이 읽을수있는 자연어로 코딩해두면, 내부적으로 프로그램이 알아서 이진 데이터로 변환하여 읽고 처리하기 때문이다. 하지만 정수, 실수, 문자가 아닌 파일이나 이미지, 비디오 같은 멀티미디어 같은 데이터를 다루어야 할때는 난감해진다. 이 멀티미디어 데이터를 정수, 문자 다루듯이 해야되는데 이진 데이터를 0과 1로 다룰수있는 것도..
📁 Base64 / Blob / ArrayBuffer / File 다루기 총정리
https://inpa.tistory.com/entry/JS-📚-Base64-Blob-ArrayBuffer-File-다루기-정말-이해하기-쉽게-설명#서버단에서_이미지_가져와_다루기
📁 Base64 / Blob / ArrayBuffer / File 다루기 총정리
🌐 FormData 사용법 & 응용 총정리 (+ fetch 전송)
FormData API 보통 서버에 데이터를 전송하기 위해서는 HTML5 의 폼 태그를 사용해 다음과 같이 메뉴를 구성하여 제출 해본 기억들이 있을 것이다. 아이디 비밀번호 성별 남자 여자 응시분야 영어 수학 이 처럼 보통은 HTML5의 태그이용해 input 값을 서버에 전송하지만, 자바스크립트에서 FormData() 클래스를 이용해 똑같이 스크립트로도 전송을 할수 있다. 즉, FormData란 HTML 단이 아닌 자바스크립트 단에서 폼 데이터를 다루는 객체라고 보면 된다. 그리고 HTML에서의 Submit 제출 동작은 Ajax를 통해 서버에 제출한다고 보면 된다. let formData = new FormData(); // new FromData()로 새로운 객체 생성 formData.append('i..
🌐 FormData 사용법 & 응용 총정리 (+ fetch 전송)
https://inpa.tistory.com/entry/JS-📚-FormData-정리-fetch-api
🌐 FormData 사용법 & 응용 총정리 (+ fetch 전송)
image Blob 객체를 url로 바꾸어 img 띄우기, javascript, JavaScript, blob, createObjectUrl, revokeObjectUrl, react, vue, window, document
https://kyounghwan01.github.io/blog/JS/JSbasic/Blob-url/
[React/JavaScript] 이미지 파일 업로드 전 미리 보는 방법
이미지 file을 서버에 업로드하기 전, 등록한 파일을 화면에서 미리 보여주고 싶을 때가 있다. URL.createObjectURL() 이용하기 부제: 이미지 미리 보기 url 생성 거두절미하고 리액트 코드부터 보시죠... import React, { useState } from "react"; function ImageUploadExample() { //파일 미리볼 url을 저장해줄 state const [fileImage, setFileImage] = useState(""); // 파일 저장 const saveFileImage = (e) => { setFileImage(URL.createObjectURL(e.target.files[0])); }; // 파일 삭제 const deleteFileImage..
[React/JavaScript] 이미지 파일 업로드 전 미리 보는 방법
https://xively.tistory.com/54
[React/JavaScript] 이미지 파일 업로드 전 미리 보는 방법