로컬 저장소: 파일 개체 저장 및 복원 방법 가이드
P粉253518620
P粉253518620 2023-08-22 13:29:16
0
2
510
<p></p>를 사용하는 HTML5/JavaScript를 사용하는 애플리케이션이 있습니다. <pre class="brush:php;toolbar:false;"><input type="file" accept="image/*;capture=camera" onchange="gotPhoto(this)"></pre> ; <p>카메라 이미지를 캡처합니다. 내 앱이 오프라인으로 실행되기를 원하므로 나중에 사용할 수 있도록 파일(https://developer.mozilla.org/en-US/docs/Web/API/File) 개체를 로컬 저장소에 저장하려면 어떻게 해야 합니까? Ajax를 통해 업로드할 때? </p> <p>파일 개체를 다음에서 가져옵니다...</p> <pre class="brush:php;toolbar:false;">function gotPhoto(element) { var 파일 = 요소.파일[0]; //여기서 '파일'을 로컬 저장소에 저장하고 싶습니다. :-( }</pre> <p>개체를 문자열로 변환하여 저장할 수 있지만 복원하면 더 이상 파일 개체로 인식되지 않으므로 파일 내용을 가져오는 데 사용할 수 없습니다. </p> <p>이것은 달성할 수 없는 일이라고 생각하지만 제안을 받아들일 준비가 되어 있습니다. </p> <p>그나저나 제 해결 방법은 전체 콘텐츠를 저장하는 동안 파일 콘텐츠를 읽고 로컬 저장소에 저장하는 것이었습니다. 이 방법은 작동하지만 각 파일이 1MB 이상의 사진이므로 로컬 저장소를 빠르게 소모합니다. </p>
P粉253518620
P粉253518620

모든 응답(2)
P粉005134685

base64로 변환하고 저장하세요.

으아아아
P粉811349112

파일 API 개체를 직렬화할 수 없습니다.

이 방법으로 구체적인 문제가 해결되지는 않지만... 나는 이것을 사용하지 않았지만 이 기사를 확인하면 사용자가 온라인일 때 복원할 수 있도록 오프라인 이미지 데이터를 일부 파일에 저장하는 몇 가지 방법(대부분의 브라우저에서는 아직 지원되지 않음)이 있는 것 같습니다. (localStorage를 사용하지 않고)

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