How to send .mp4 from frontend to backend

[harloxx]

문제상황:
프론트엔드에서 사용자가 웹캠을 이용하여 영상을 찍으면, 해당 mp4 파일을 사진과 합성시키기 위해 일차적으로 백엔드로 보내주어야 한다. 하지만 mp4파일은 대체로 용량도 클 텐데 어떤식으로 백엔드에 전달 할 수 있을까

[aswooo]

Frontend ->Backend

axios를 통해서 파일을 업로드 할 때 쓰이는 formdata 형식을 사용한다.
formData 객체를 생성한 후 formData.append(key, filename) 함수를 통해서 formData 객체에 데이터를 삽입한다.
file이라는 키에 영상 데이터, image_no라는 키에는 사용자 선택 번호를 값으로 넣는다.

...
    const formData = new FormData();
    formData.append("file", file);
    formData.append("image_no", parseInt(num)+1);
...

post요청을 보낼시 파일(Video)과 사용자가 선택한 번호(Text) 2가지를 업로드하기 때문에
헤더에 인코딩 방식을 multipart/form-data로 지정해준다.

...
    const config = { header: { "content-type": "multipart/form-data" }, };
    await api.post("/api/model", formData, config)
...

[harloxx]

프론트로부터 multipart/form-data형식으로 이미지, 파일을 받는다.

...
      <form action = "http://localhost:5000/api/model" method = "POST" 
         enctype = "multipart/form-data">
         <input type ="number" name="image_no" />
         <input type = "file" name = "file" />
         <input type = "submit"/>
      </form>
...

프론트엔드로부터 온 request를 저장한다

...
@app.route('/upload')
def load_file():
   return render_template('upload.html')


@app.route('/api/model', methods = ['POST'])
def upload_file():
    if request.method == 'POST':
        try:
            img_name=request.form['image_no']
            f = request.files['file']
            f.save(secure_filename(f.filename))
            return mixvideo(img_name, f.filename)
        except:
            abort(500,"Something wrong")

...