React 는 아 리 클 라 우 드 OSS 가 파일 을 업로드 하 는 예 시 를 실현 합 니 다.

간단 한 소개
아 리 클 라 우 드 OSS 는 아 리 클 라 우 드 가 제공 하 는 대량의 안전,낮은 원가,높 은 신뢰성 을 가 진 클 라 우 드 저장 서비스 로 99.99999999%의 데이터 신뢰성(호칭)을 제공한다.RESTful API 를 사용 하면 인터넷 의 모든 위치 에 저장 하고 접근 할 수 있 으 며 용량 과 처리 능력 의 탄력 적 인 확장 을 지원 합 니 다.
기본 용어
1.bucket:로 컬 과 유사 한 폴 더
2.object:oss 가 데 이 터 를 저장 하 는 기본 단원 으로 로 컬 파일 과 유사 합 니 다.
3.region:oss 에 저 장 된 데이터 센터 가 있 는 지역
4.Endpoint:oss 대외 서비스의 방문 도 메 인 이름,oss 는 http api 로 서 비 스 를 제공 합 니 다.서로 다른 region 의 edpoint 는 다 릅 니 다.
5.AccessKey:방문 비밀 키,약칭 AK,AccessKeyId 와 AccessKeySecret 를 포함 하여 방문 자의 신분 을 검증 하 는 데 사 용 됩 니 다.후 자 는 반드시 비밀 을 지 켜 야 한다.
크로스 도 메 인 CROS 설정
콘 솔 에 들 어가 기-기본 설정-'크로스 도 메 인-'팝 업 대화 상 자 를 추가 한 후 원본:도 메 인 이름과 포트 정 보 를 입력 합 니 다.Google 이 이전에 Azure 에서 blob 웹 페이지 를 직접 업로드 한 서버 와 같은 방식 을 사용 할 때 도 메 인,도 메 인,포트 를 설정 하여 서로 다른 환경 에 대응 하 는 도 메 인 이름과 포트 를 연결 해 야 합 니 다.
OSS 조작
파일 저장 위치 만 들 기
콘 솔 입장-"bucket 만 들 기-"설정 작성-"완료
콘 솔 업로드 다운로드(간단 한 테스트)
파일 관리-"디 렉 터 리 만 들 기-"업로드 파일
AccessKey 및 AccessSecrect 생 성
프로필 사진-"AccessKey 관리-"를 누 르 면 하위 사용자 Key-"를 사용 하여 하위 사용자 이름 을 작성 하고 프로 그래 밍 접근 을 선택 하 십시오.확인-"인증 코드 는 작성 을 받 고 확인-"key 와 Secret-"권한 관리-"권한 부여-"추가 관리 대상 저장 OSS 권한

메모:하위 사용자 의 키 를 사용 해 야 합 니 다.메 인 계 정 을 사용 하면 코드 를 제출 할 때 권한 이 유출 되 기 쉬 우 며,키 와 시 크 릿 이 유출 되면 계 정 비밀번호 가 유출 되 는 것 과 같 으 면 서버 가 완전히 노출 됩 니 다.
API 조작
실제 항목 에 서 는 콘 솔 에서 손 으로 조작 하 는 것 이 아니 라 프로그램 을 이용 해 업로드 와 다운 로드 를 제어 하 는 것 이다.OSS 는 파일 을 다운로드 에 업로드 할 수 있 도록 일련의 restful API 를 제공 합 니 다.
알 리 클 라 우 드 가 제공 하 는 SDK 간소화 로 구현 할 수 있다.구체 적 으로 다음 문장 을 보시오.
전단 업로드 파일 프로그램 개발
기본 절차
실제 프로젝트 에서 일반적으로 분포 식 및 마이크로 서 비 스 를 사용 하 는 웹 업무 시스템 에서 파일 의 업로드 와 다운 로드 는 모두 전단 에서 oss 에 대한 조작 을 실현 합 니 다.전면 에 직접 올 려 자신의 서버 를 통과 하지 않 는 것 이다.이렇게 하면 시스템 의 장애 없 는 가로 확장 을 실현 할 수 있다.또 다른 이 유 는 웹 서버 를 실행 하 는 같은 서버 에 파일 을 저장 하려 면 파일 을 업로드 할 때 대역 폭 을 차지 하여 웹 접근 에 영향 을 줄 수 있 기 때문이다.분리 저장 소 는 서버 대역 폭 을 차지 하지 않 습 니 다.
아 리 OSS 는 세 가지 전단 직 전 방식 을 제공 합 니 다.
1.브 라 우 저 서명 후 바로 OSS 업로드(서버 개입 필요 없 음)
2.브 라 우 저 는 서버 서명 주 소 를 요청 한 후 업로드 합 니 다(서버 협조 가 필요 합 니 다)
3.브 라 우 저 는 서버 서명 주 소 를 요청 한 후 서버 를 업로드 하고 리 셋 합 니 다(서버 협조 가 필요 합 니 다)
실제 생산 환경 은 안전성 을 고려 하여 반드시 두 번 째 방식 을 선택해 야 하 며,서비스 측 과 전단 이 서로 협조 해 야 하 며,안전성 요구 가 높 지 않 을 때 첫 번 째 방식 을 사용 할 수 있다.각각 아래 와 같다.
방식 1:전단 직접 전송(서버 개입 필요 없 음)
파일 의 안전성 을 확보 하기 위해 서 는 일반적으로 bucket 을 개인 으로 설정 합 니 다.즉,인증 권 이후 의 사용자 가 OSS 의 내용 에 접근 할 수 있 습 니 다.전단 직 전의 원 리 는 브 라 우 저 에서 OSS 콘 솔 에서 제공 하 는 AccessId 와 AccessSecret 에 따라 서명 을 생 성하 여 직접 업로드 하 는 것 으로 서버 를 거치 지 않 아 도 되 며 사용 이 간단 하고 안전 하지 않다 는 장점 이 있다.
React 조합 antd 에서 업로드 구성 요 소 는 다음 과 같 습 니 다.
upload 구성 요 소 는beforeUpload갈고리 함 수 를 제공 합 니 다.OSSpost 파일 을 실행 하기 전에 우 리 는 먼저 로 컬 에서 OSS 가 요구 하 는 서명 을 계산 합 니 다.다음 과 같 습 니 다.

beforeUpload = async () => {
 const { OSSData } = this.state;
 const expire = OSSData.expire * 1000;

 if (expire < Date.now()) {
  await this.init();
 }
 return true;
};

init = async () => {
 try {
  const OSSData = await this.mockGetOSSData();

  this.setState({
   OSSData,
  });
 } catch (error) {
  message.error(error);
 }
};
mockGetOSSData = () => {
 var policyText = {
  expiration: "2020-12-01T12:00:00.000Z", //   Policy     ，          ，         policy     
  conditions: [
   ["content-length-range", 0, 1048576000], //            
  ],
 };
 let accesskey = "    "; //    
 var policyBase64 = Base64.encode(JSON.stringify(policyText));
 let message = policyBase64;
 var bytes = Crypto.HMAC(Crypto.SHA1, message, accesskey, { asBytes: true });
 var signature = Crypto.util.bytesToBase64(bytes);

 return {
  dir: "user-dir/", //bucket    
  expire: "0", //     '1577811661',
  host: "http://om-test-oss.oss-cn-beijing.aliyuncs.com",
  accessId: "    ",
  policy: policyBase64, //you
  signature: signature,
 };
};

갈고리 함 수 는 먼저 서명 이 만 료 되 었 는 지 여 부 를 계산 하고 만 료 되면init함수 간접 호출mockGetOSSData을 통 해 Base 64 등 OSS 요구 방법 으로 서명 데 이 터 를 생 성 합 니 다.이 중accessId과accesskey는 OSS 콘 솔 에서 받 았 다.
서명 데 이 터 를 생 성 한 후upload구성 요소 중actionprops 를 이용 하여 파일 업로드 목적 지 를 OSS 의 실제 유효 주 소 를 가리 키 고 업로드 합 니 다.

render() {
  const { value } = this.props;
  const props = {
   name: 'file',
   listType: "picture-card",
   fileList: value,
   action: this.state.OSSData.host,
   onChange: this.onChange,
   onRemove: this.onRemove,
   transformFile: this.transformFile,
   data: this.getExtraData,
   beforeUpload: this.beforeUpload,
  };
  return (
   <Upload {...props}>
    <Icon type="plus" />
   </Upload>
  );
 }

전체 코드 는 다음 과 같 습 니 다:

render() {
  const { value } = this.props;
  const props = {
   name: 'file',
   listType: "picture-card",
   fileList: value,
   action: this.state.OSSData.host,
   onChange: this.onChange,
   onRemove: this.onRemove,
   transformFile: this.transformFile,
   data: this.getExtraData,
   beforeUpload: this.beforeUpload,
  };
  return (
   <Upload {...props}>
    <Icon type="plus" />
   </Upload>
  );
 }

방식 2:전단 과 백 엔 드 가 함께 업로드
백 엔 드 인증 인터페이스
백 엔 드 에 인 터 페 이 스 를 추가 해 야 합 니 다.백 엔 드 는 알 리 가 제공 하 는 SDK 를 이용 하여 인증 인 터 페 이 스 를 작성 합 니 다.입력 은 업로드 할 파일 내용 입 니 다.콘 솔 에서 얻 은 endpoint,AccessKey 와 AccessSecret 의 실례 화 client 에 따라 전단 에 파일 을 업로드 하기 전에 이 인 터 페 이 스 를 요청 합 니 다.서버 는 알 리 클 라 우 드 OSS 와 상호작용 을 하고 bucket 에 따라 서명 한 업로드,다운로드 주소(과정 에서 다운로드 업로드 유효기간 과 Conetent-type 을 설정 할 수 있 습 니 다)는 두 가지 와 파일 이름 을 전단 으로 되 돌려 주 고 전단 의 다음 작업 에 사용 할 수 있 습 니 다.

전단 분리 요청
전단 다음 백 엔 드 인증 인터페이스 에 따라 서명 한 puuturl 을 puut 방식 으로 그림 파일 을 업로드 합 니 다.전단 put 에서 그림 을 업로드 하 는 데 성공 한 후 geturl 을 통 해 그림 을 가 져 와 웹 페이지 를 표시 할 수 있 습 니 다.재생 과 동시에 사진 이름 을 제출 할 폼 에 삽입 하고 마지막 으로 제출 단 추 를 누 르 면 그림 경로 등 정 보 를 자신의 백 엔 드 다른 인터페이스 에 게시 하고 백 엔 드 는 데이터 라 이브 러 리 에 저장 합 니 다.
전단 프로그램 은 위의 방식 1 과 대동소이 합 니 다.유일한 차이 점 은mockGetOSSData함수 입 니 다.이전 에는 전단 에서 서명 을 계산 하 였 습 니 다.여 기 는 백 엔 드 의 감 권 인 터 페 이 스 를 호출 하여 서명 데 이 터 를 얻 었 습 니 다.
**주의:**마지막 인터페이스 호출 에서 파일 이름 은 후반 부 에 불과 합 니 다.전반 부 경 로 는 OSS 가 제공 하 는 bucket 경로 입 니 다.똑 같 습 니 다.다시 보 여 드릴 때 전단 이 스스로 연결 되 어 있 습 니 다.
업로드 중 실패 처리
상기 전단 직 전 프로 세 스 는 적어도 세 개의 인 터 페 이 스 를 호출 합 니 다:감 권,업로드,저장.파일 을 업로드 한 후에 저장 인 터 페 이 스 를 호출 하지 않 으 면 응용 서비스 가 OSS 에 있 는 파일 을 데이터베이스 에 연결 하지 않 았 을 때 OSSbucket 에 더러 운 데이터 가 있 는 경우 가 발생 합 니 다.해결 방법 은 사용자 가 임시 폴 더 에 업로드 하도록 하고 저장 인 터 페 이 스 를 호출 한 후에 실제 bucket 으로 이동 한 다음 에 임시 폴 더 를 정기 적 으로 삭제 하 는 것 입 니 다.
전단 다운로드 파일 프로그램 개발
업로드 와 유사 하 게 OSS 도 브 라 우 저 다운 로드 를 지원 합 니 다.bucket 의 읽 기와 쓰기 권한 이 개인 으로 설정 되면 읽 기와 쓰 기 는 모두 서명 해 야 합 니 다.예 를 들 면 다음 과 같다.
OSS 에 사진 을 올 리 는 데 성공 하면 얻 은 사진 url 은user-dir/1580982085120.png이 고 OSS 앞부분 을 직접 연결 하면http://om-test-oss.oss-cn-beijing.aliyuncs.com/user-dir/1580982085120.png방문 에 실 패 했 습 니 다.OSS 가 서명 정보 가 없 으 면 방문 을 거부 할 것 이 라 고 판단 하기 때 문 입 니 다.실제 서명 후의 사진 주 소 는:http://om-test-oss.oss-cn-beijing.aliyuncs.com/user-dir/1580982085120.png?OSSAccessKeyId=LTAI4Fv75GobJhGFkwVzdPJq&Expires=1580983892&Signature=FZYmRRo6XnFu3INC55zJSdTWT%2Fc%3D입 니 다.
우리 가 해 야 할 일 은 서명 을 받 은 다운로드 주소 입 니 다.다운 로드 는 업로드 와 마찬가지 로 서버 참여 가 필요 한 지 두 가지 방식 으로 나 뉜 다.
방식 1:전단 서명 직접 다운로드
전단 서명 은 업로드 와 유사 하 며,AccessId 와 AccessSecret 에 따라 서명 정 보 를 생 성 합 니 다.
서명 정 보 는 URL 에 휴대 할 수도 있 고 요청 헤더 에 휴대 할 수도 있 으 며 편리 하 게 사용 할 수 있 도록 이번 조사 연 구 는 전 자 를 사용 합 니 다.
로 컬 서명 은 OSS 에서 제공 하 는 SDK 를 사 용 했 습 니 다.react 가 먼저 설치 되 었 습 니 다.

npm install ali-oss --save

그리고 구성 요소 에 도입 합 니 다.

import OSS from "ali-oss";

SDK 를 봉인 하 는 서명 방법 간소화 사용

import React, { Component } from "react";
import OSS from "ali-oss";
let GetOssfileClient = new OSS({
 region: "oss-cn-beijing", //oss  region，     
 accessKeyId: "    ", //oss  accessKeyId,     
 accessKeySecret: "    ", //oss  accessKeySecret,     
 bucket: "om-test-oss", //oss buket  ，    
});
export default GetOssfileClient;

구성 요 소 를 업로드 하 는 미리 보기 기능 은 다음 과 같은 그림 을 다운로드 하 는 데 사 용 됩 니 다.

//                  oss    ，             oss   
handlePreview = (file) => {
 //file thumbUrl      ，url OSS     ，         
 console.log("     file.url", file.url);
 let url = GetOssfileClient.signatureUrl(file.url);
 console.log(url);
 file.url = url; //           ，
 console.log("     file.url，        ：", file.url);
 this.setState({
  previewImage: file.url || file.thumbUrl,
  previewVisible: true,
 });
};

업로드 구성 요소 미리 보기 기능 을 사용 하여 그림 의 다운로드 디 스 플레이 를 테스트 합 니 다.미리 보기 아이콘 을 누 르 면handlePreview함수 가 실 행 됩 니 다.실제 그림 파일 의 파일 이름 을 가 져 온 다음 sdksignatureUrl방법 으로 서명 한 후 실제 경 로 를 얻 은 다음 modal 에 표 시 됩 니 다.

<Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
 <img alt="example" style={{ width: "100%" }} src={previewImage} />
</Modal>

방식 2:백 엔 드 에서 돌아 오 는 연결 에 따라 전단 을 다운로드 합 니 다.
상기 -> 2와 같이 전단 은 백 엔 드 코드 로 돌아 온 url 로 그림 을 표시 하면 됩 니 다.백 엔 드 에서 돌아 온 url 은 서명 후의 전체 경로 입 니 다.
안전 을 위해 서 는 앞 뒤 설정 으로 업로드 다운로드 하 는 것 이 좋 습 니 다.
React 가 아 리 클 라 우 드 OSS 업로드 파일 을 실현 하 는 예제 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 React 아 리 클 라 우 드 OSS 업로드 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!