Google Apps Script를 사용하여 Google Forms를 사용하지 않고 내 Google Drive에 직접 파일을 업로드합니다.
P粉785905797
P粉785905797 2024-01-21 15:39:43
0
2
593

기본적으로 작업은 매우 간단하지만 문제에 대한 실행 가능한 해결책을 찾지 못했습니다. 내 웹사이트(현재는 localhost)에 거대한 업로드 스크립트가 있지만 모든 복잡성을 필요한 것만으로 줄이겠습니다.

그래서 저는 Google App Script를 사용하여 단일 파일을 Google Drive에 업로드하고 해당 URL을 받아 var에 저장하여 나중에 해당 정보를 함수에서 사용할 수 있도록 하고 싶습니다.

이제 문제는 내 웹사이트에 이미 양식이 있고 script.google .com 내의 양식을 추가 HTML로 원하지 않는다는 것입니다. 사용자 입력을 Google App Script로 전송한 다음 업로드하고 싶습니다. Google 드라이브에 연결하고 URL을 내 웹사이트로 반환하면 이를 var에 저장할 수 있습니다.

지금 내 문제는 모든 것을 하나로 합칠 수 없다는 것입니다.

이것은 내 웹사이트에 있는 양식입니다(간체):

으아아아

그렇다면 Google 드라이브에 내 정보를 업로드하고 결과를 얻으려면 어떻게 해야 하나요? iFrame이나 다른 것을 사용하지 않고 Google App Script에서 데이터를 푸시하려면 어떻게 해야 하나요?

감사합니다!

**** HTML이 script.google .com에 있는 경우 작동 예 ****

GS

으아아아

apps.googlescript

의 HTML 으아아아

제시한 대로 여기서는 그 과정을 설명하겠습니다.

우리는 www.example.com 웹사이트에 있고 텍스트 입력 필드와 파일 필드가 있는 양식을 가지고 있습니다. 이미지를 넣고 이를 예시라고 가정해 보겠습니다. 이제 제출을 누르면 oAuth 없이 Google 드라이브에 이미지를 업로드하고(그래서 여기에서는 Google App Script를 사용해야 합니다) 텍스트 필드에 입력한 이름을 지정하고 싶습니다. 업로드가 완료되면 양식에서 해당 정보를 계속 사용할 수 있도록 Google 드라이브 이미지의 URL을 웹사이트에 반환하고 싶습니다. 반환된 URL을 var에 저장하고 나중에 데이터베이스에 저장하고 싶습니다. 이것이 바로 결과를 내 웹사이트로 반환해야 하는 이유입니다.

해결책은 다음과 같습니다.

웹사이트의 양식에 정보 입력 -> Google 앱 스크립트로 리디렉션: 웹사이트 양식 필드의 정보를 가져와 파일을 Google 드라이브에 업로드하고 이름을 텍스트 입력 항목으로 지정 -> 최종 URL 결과를 웹사이트로 다시 저장-> URL 결과를 var에 저장하고 웹사이트의 함수에서 작업을 계속 수행합니다-> 마지막으로 var에 있는 정보를 데이터베이스에 저장합니다.

-------------------------------------- ---------- - 편집자: -----

@Tanaike 덕분에 챌린지 목표에 더 가까워졌네요. 어디에서 막혔는지 확인하기 위해 지금 질문을 복사하고 있습니다.

귀하의 예에 있는 스크립트를 사용하여 양식을 얻었습니다:

으아아아

Google 스크립트의 경우:

으아아아

이제 콘텐츠를 업로드하려고 하면 다음 오류가 발생합니다: CORS 정책을 얻을 수 없습니다. 그래서 이 부분을 다음과 같이 변경하고 no cors 모드를 추가했습니다.

으아아아

이렇게 작동합니다. 파일을 업로드하려는 두 번째 시도에서 다음 오류가 발생했습니다. 내용은 다음과 같습니다: syntax错误:输入意外结束

그래서 이 줄을 변경하고 res.json에서 괄호를 제거했습니다

으아아아

세 번째로 실제 유효한 파일을 업로드하려고 시도했을 때 콘솔 결과는 다음과 같습니다.

으아아아

근데 구글 드라이브에는 업로드된 파일이 없습니다. 어딘가에 뭔가가 빠져 있습니다. 어쩌면 폴더를 만들고 그 안에 파일을 넣어야 할 수도 있습니다.

아, 한 가지 추가 정보: Google 앱 스크립트에서 doPost 기능을 실행하면 다음과 같이 표시됩니다.

으아아아

편집 2 ---------------------------------- --- ------

코드에 https://drive.google .com/uc?export=download&id=###fileId###를 추가했는데 모든 것이 잘 작동합니다. 파일을 업로드하는 중입니다.

test.mp3 파일을 업로드하고 이름을 testdata로 지정한다고 가정해 보겠습니다. 우리가 받은 내용은 다음과 같습니다:

으아아아

이제 파일 URL을 열면 브라우저가 파일을 다운로드하지만 파일 이름은 testdata.mp3 대신 testdata입니다. 파일 형식의 끝 부분이 누락되었습니다.

두 번째 작업: 링크를 클릭하면 브라우저에서 파일을 열고 싶습니다. 예를 들어 mp3 파일인 경우 다음과 같이 웹뷰에서 사운드를 재생하길 바랍니다: https:// files .freemusicarchive .org/storage-freemusicarchive-org/music/Creative_Commons/Dead_Combo/CC_Affiliates_Mixtape_1/Dead_Combo_-_01_-_Povo_Que_Cas_Decalo.mp3

당신이 나를 안내할 수 있기를 바랍니다!

P粉785905797
P粉785905797

모든 응답(2)
P粉512729862

https://stackoverflow.com/a/63391363/1585523 답변에는 유용한 팁이 많이 있습니다! 공유해 주셔서 감사합니다. POST 파일 외에도

를 사용할 수도 있습니다.

클라이언트: index.html

으아아아

서버: Code.gs

으아아아

이 방법을 사용하면 JS 객체와 같은 복잡한 유형을 바이너리 정보와 값으로 교환할 수도 있습니다.

P粉298305266

귀하의 목표는 다음과 같다고 생각합니다.

  • 귀하의 웹사이트는 Google 계정에 연결되어 있지 않습니다. 그것은 독립적이다.
  • 귀하의 웹사이트에는 파일 업로드 양식이 있습니다.
  • 사용자가 양식을 제출하면 승인 없이 Google 드라이브에 파일을 업로드하고 Google 드라이브에 업로드된 파일의 URL을 반환하려고 합니다.
  • "데이터베이스"란 이것이 귀하의 데이터베이스입니다. 검색된 파일 URL을 클라이언트의 "데이터베이스"에 배치합니다.

이 경우 Google Apps Script를 사용하여 만든 웹 애플리케이션이 목표를 달성할 수 있다고 생각합니다.

사용법:

다음 과정을 따라주세요.

1. Google Apps Script에 대한 새 프로젝트를 만듭니다.

Web Apps용 샘플 스크립트는 Google Apps Script입니다. 따라서 Google Apps Script 프로젝트를 만듭니다.

직접 제작을 원하시면 https://script.new/를 방문해주세요. 이 경우 아직 Google에 로그인되어 있지 않다면 로그인 화면이 열립니다. 그러니 구글에 로그인해주세요. 그러면 Google Apps Script 스크립트 편집기가 열립니다.

2. 스크립트를 준비합니다.

다음 스크립트(Google Apps Script)를 복사하여 스크립트 편집기에 붙여넣으세요. 이 스크립트는 웹 애플리케이션에 적합합니다.

서버측: Google Apps Script

파일을 저장할 폴더 ID를 설정해주세요.

으아아아

3. 웹 애플리케이션을 배포합니다.

  1. 스크립트 편집기에서 게시 -> 웹 앱으로 배포를 통해 대화 상자를 엽니다.
  2. "응용 프로그램 실행:" 에 대해 "나" 를 선택합니다.
      이렇게 하면 스크립트가 소유자 권한으로 실행됩니다.
  3. "앱에 액세스할 수 있는 사람:" 에 대해 "익명이라도 누구나" 를 선택합니다.
  4. 새 "프로젝트 버전"으로 "배포" 버튼을 클릭하세요.
  5. "인증 필요" 대화 상자가 자동으로 열립니다.
    1. "권한 보기"를 클릭하세요.
    2. 자신의 계정을 선택하세요.
    3. "이 앱은 확인되지 않았습니다" 옆에 있는 "고급"을 클릭하세요.
    4. "### 프로젝트 이름 ###(안전하지 않음)으로 이동"을 클릭하세요.
    5. "허용" 버튼을 클릭하세요.
  6. "확인"을 클릭하세요.
  7. 웹 애플리케이션의 URL을 복사하세요.
  8. 처럼요. https://script.google.com/macros/s/###/exec
    • Google Apps Script를 수정한 후 새 버전으로 재배포해 주세요. 이런 방식으로 수정된 스크립트가 Web Apps에 반영됩니다. 이에 주의하시기 바랍니다.
4. 클라이언트에서 서버로 파일을 업로드합니다.

클라이언트: HTML 및 Javascript

웹 애플리케이션의 URL을 다음 스크립트로 설정하세요.

으아아아

    클라이언트 측에서는 로컬 PC에서 파일을 선택하고 버튼을 누르면 웹 앱(서버 측)에서 데이터를 가져와 파일이 Google 드라이브에 업로드됩니다.
결과:

위 스크립트를 실행하면 아래와 같은 값이 반환됩니다. 여기에서 파일의 URL을 검색할 수 있습니다.

으아아아

참고:

  • Web Apps의 스크립트를 수정하는 경우 Web Apps를 새 버전으로 다시 배포하세요. 이렇게 하면 최신 스크립트가 Web Apps에 반영됩니다. 이에 주의하시기 바랍니다.
  • 위 스크립트에서 최대 파일 크기는 50MB입니다. 왜냐하면 이 단계에서 Google Apps Script의 최대 Blob 크기는 50MB이기 때문입니다.

참조:

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿