Vue Alibaba Cloud 업로드 구성 요소에 대한 자세한 설명

이 기사에서는 주로 웹 직접 전송을 사용하여 Vue 프로젝트에 Alibaba Cloud OSS 이미지를 업로드하는 방법을 소개합니다. 기본적으로 독자는 Vue 프레임워크와 Alibaba Cloud OSS에 대해 어느 정도 이해하고 있습니다. 전체 프로세스는 Alibaba Cloud SDK를 로드하는 것입니다. > 업로드 클라이언트 클라이언트 초기화 -> 업로드할 파일 선택 -> 업로드 결과 배포

사용 중에 다음과 같은 문제가 발생했습니다.

1. js 소개 형식, SDK의 npm 형식은 일부 백엔드 노드 기능이 필요하며 직접적인 웹 전송에는 사용할 수 없습니다.

html에 직접 스크립트 태그를 추가할 수 있습니다.

<script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.3.0.min.js"></script>

구성 요소에는 SDK를 비동기적으로 가져오는 방법인 LoadJS가 패키지되어 있습니다. 관심이 있으시면 js를 사용하여 소개해보세요. SDK에 비동기 문제가 발생합니다. 클라이언트가 초기화될 때 SDK가 로드되지 않을 수 있습니다. vue의 마우티드 후크 함수에 타이머를 설정한 다음 SDK가 로드된 후 클라이언트를 초기화합니다. https 환경에서는 클라이언트를 초기화할 때 secure가 true로 구성되어 있는지 확인해야 합니다. 그렇지 않으면 파일을 업로드할 수 없습니다

4. 기본적으로 저장된 사진의 이름은 임의의 문자열이지만, 동일한 사진의 경우 여러 번 업로드되면 동일한 사진이 여러 장 저장됩니다. 사진의 경우 여기에서 사진의 크기, 높이, 너비를 문자열로 연결한 다음 이런 방식으로 문자열을 해싱했습니다. 한 장의 사진은 여러 번 업로드하면 저장됩니다.

관련 권장 사항:

업로드 구성 요소 핵심 아키텍처 설계에 대한 간략한 토론

php 다중 파일 업로드 구성 요소_PHP 튜토리얼

JS 사용 방법 구성 요소 파일 업로드사용자 정의 template_javascript 기술 업로드

위 내용은 Vue Alibaba Cloud 업로드 구성 요소에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!