>  기사  >  웹 프론트엔드  >  uniapp에서 로컬로 사진을 저장하는 방법

uniapp에서 로컬로 사진을 저장하는 방법

PHPz
PHPz원래의
2023-04-20 15:05:217166검색

모바일 인터넷과 모바일 애플리케이션의 발전으로 사용자들이 애플리케이션 사용 중에 많은 양의 사진을 저장하고 관리하기 위해 널리 사용되었습니다. Uniapp은 Vue.js를 기반으로 개발된 크로스 플랫폼 프레임워크로, 소형 프로그램, H5, App 및 기타 애플리케이션을 쉽게 개발할 수 있습니다. 개발 과정에서 다음 번에 빠른 호출을 위해 얻은 사진을 로컬에 저장해야 하는 경우가 있습니다. Uniapp이 사진을 로컬에 저장하는 방법을 살펴보겠습니다.

1. 사진 얻기
개발 과정에서 uni.request 또는 uni.downloadFile을 통해 사진 리소스를 얻을 수 있습니다.

  1. uni.request
    uni.request는 Uniapp에서 네트워크 요청을 하는 일반적인 방법으로 responseType 속성을 설정하여 이미지 리소스를 얻을 수 있습니다. 구체적인 코드는 다음과 같습니다.
uni.request({
  url: 'http://www.example.com/resource/1.jpg',
  responseType: 'arraybuffer',
  success: (res) => {
    uni.saveFile({
      tempFilePath: res.tempFilePath,
      success: (saveRes) => {
        console.log(saveRes);
      }
    });
  }
});

그 중 url은 사진에 대한 링크이고, responseType은 'arraybuffer'로, 사진 리소스를 바이너리 형태로 획득한 후 저장한다는 의미입니다. tempFilePath에 저장하고 마지막으로 uni.saveFile을 통해 사진을 로컬에 저장합니다.

  1. uni.downloadFile
    uni.downloadFile은 Uniapp에서 파일을 다운로드하는 일반적인 방법입니다. URL 속성을 설정하여 이미지 리소스를 얻을 수 있습니다. 구체적인 코드는 다음과 같습니다.
uni.downloadFile({
  url: 'http://www.example.com/resource/1.jpg',
  success: (res) => {
    uni.saveFile({
      tempFilePath: res.tempFilePath,
      success: (saveRes) => {
        console.log(saveRes);
      }
    });
  }
});

그 중 URL이 사진의 링크입니다. 성공적으로 얻은 후 tempFilePath에 저장되고, 최종적으로 uni.saveFile을 통해 사진이 로컬에 저장됩니다.

2. 이미지 저장
이미지 리소스를 얻었으니 이제 로컬에 저장해야 합니다. 파일은 uni.saveFile을 통해 로컬로 저장할 수 있지만 저장 경로는 플랫폼마다 다릅니다. Uniapp은 현재 플랫폼의 로컬 저장 경로를 얻기 위해 getFileSystemManager 메서드를 캡슐화합니다.

구체적인 코드는 다음과 같습니다.

uni.getFileSystemManager().access({
  path: '/storage/emulated/0/uniapp_demo/',
  success: () => {
    uni.saveFile({
      tempFilePath: res.tempFilePath,
      filePath: '/storage/emulated/0/uniapp_demo/1.jpg',
      success: (res) => {
        console.log('保存成功');
      }
    });
  },
  fail: () => {
    uni.getFileSystemManager().mkdir({
      dirPath: '/storage/emulated/0/uniapp_demo/',
      success: () => {
        uni.saveFile({
          tempFilePath: res.tempFilePath,
          filePath: '/storage/emulated/0/uniapp_demo/1.jpg',
          success: (res) => {
            console.log('保存成功');
          }
        });
      }
    });
  }
});

그 중 path는 로컬 저장 경로입니다. 디렉터리가 존재하지 않는 경우에는 액세스를 사용하여 디렉터리를 생성합니다. 파일을 로컬에 저장합니다.

3. 결론
위는 유니앱에서 사진을 로컬에 저장하는 방법입니다. 개발자는 필요에 따라 조정할 수 있습니다. 사용 중 문제가 발생하면 유니앱 공식 홈페이지 문서나 커뮤니티 게시물을 통해 문제를 해결할 수 있습니다. 이 기사가 도움이 되기를 바랍니다.

위 내용은 uniapp에서 로컬로 사진을 저장하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.