# 전언

이전에 글을 쓸 때 사진 삽입 문제를 해결하기 위해 COS(Tencent Cloud Object Storage)를 사용하여 내 그림을 저장하고 PicGo를 사용하여 Windows 플랫폼에 파일을 업로드했습니다.

내 웹사이트에서 트래픽이 크지 않을 때는 전혀 문제가 없었지만, 트래픽이 점점 커지자, 개체가 매달 무료 트래픽을 저장하는 것이 초과된다는 것을 알게 되었고, 초과가 많지는 않지만 이 또한 추가적인 오버헤드였다.그리고 시간이 지날수록 이 부분의 지출이 점점 커지기 때문에 파일을 저 자신 서버에 저장할 생각입니다.

또한 Google Search Console에서는 내 사진 콘텐츠가 압축되지 않았으므로 보다 진보된 WebP 형식을 사용하여 저장 공간과 대역폭을 더욱 절약할 수 있어야 한다고 말합니다.

# 수요 분석

이러한 요구 사항은 PicGo에 해당 플러그인을 통해 구현될 수 있습니다.그러나 PicGo에서는 작동이 매우 불편하여, sftp를 사용하여 파일을 내 서버로 전송해야 하는 요구 사항을 충족하지 못하고, 압축 기능은 전혀 사용할 수 없습니다. 플러그인 시장에서 두 플러그인 모두 클라우드 서비스를 호출하여 구현되었습니다. 클라우드 서비스 업데이트 api는 그냥 끊었습니다.

그래서 저는 제 블로그 시스템에 내장되어 있는 간단한 이미지 업로드 가젯을 스스로 구현하려고 하는데, 그 기능은 매우 간단합니다. 그냥 업로드하고 형식을 변환하는 기능만 구현하면 됩니다.

# 간단한 구현

가장 간단한 방법으로 페이지를 만들었는데, 이 페이지는 서버에 사진을 업로드하고 markdown 형식의 링크를 반환하는 기능만 가지고 있습니다.다음 그림은 최종 효과입니다.

프런트엔드 코드가 너무 길어서 simplenote 에 넣었습니다. html_code 프론트 엔드의 기능은 간단합니다. 사진의 선택, 드래그 앤 드롭 및 직접 ctrl+v 붙여넣기를 지원하면 백그라운드에서 자동으로 업로드가 처리되고, 오류가 있으면 콘솔에서 오류를 보고하고, 정상적으로 업로드가 완료되면 백엔드에서 반환된 링크가 페이지에 출력되고 복사 버튼이 제공됩니다.

백엔드 코드:

if 'image' not in request.files:
            return 'No file uploaded!', 400
        file = request.files['image']
        if file.filename == '':
            return 'No file selected!', 400
        try:
            timestamp = datetime.datetime.now().strftime("%d%H%M%S%f")
            filename = timestamp + '.webp'
            now = datetime.datetime.now()
            folder_name = now.strftime("%Y/%m")
            folder_path = os.path.join('/home/wwwroot/img.learn2.cn/new_img/', folder_name)
            os.makedirs(folder_path, exist_ok=True)
            save_path = folder_path +"/"+ filename
            image = Image.open(file)
            image = image.convert('RGB')
            image.save(save_path, 'WEBP')
            return f'![tstrs.me_img](https://img.learn2.cn/new_img/{folder_name}/{filename})', 200
        except Exception as e:
            return str(e), 500

위 코드의 작업 로직은 다음과 같습니다: request의 파일, 그림 파일인지 확인합니다.다음 단계로 계속 진행하면 새 파일 이름을 생성하여 날짜에 따라 저장된 폴더를 생성합니다.그런 다음 PIL을 사용하여 그림을 WebP 형식으로 변환한 다음 markdown 형식의 링크를 복제를 위해 전면 페이지로 되돌립니다.

위의 코드는 아이디어에 불과하며 실제로 실행할 수 있는 스크립트가 아니며, 이러한 맞춤형 플러그인이 모든 사람이 사용할 수 있는 것은 아닙니다.위의 코드를 약간 수정한 후 자신의 프로그램에 이식할 수 있습니다.

# 후기

직접 해야 먹을 것이 풍부하고, 많은 기성 도구들이 괜찮은 것은 사실이지만, 너무 부어서 이렇게 많은 기능을 전혀 사용할 수 없습니다.참, 여기 면의 JS 코드는 대부분 ChatGPT가 썼는데 난 그냥 api 부분 수정했어~

최근 두 달 동안 일이 너무 바빠서 이 블로그는 다 월갱이가 되어가고 있다.누적된 원고는 이미 굉장히 많아졌고, 그 뒤로는 서서히 업데이트될 것이다.