브라우저에서 Azure Blob Storage에 직접 파일을 업로드하시겠습니까?

브라우저에서 Azure Blob Storage에 직접 파일을 업로드하시겠습니까?

웹 사용자가 다른 서버를 중개자로 사용하지 않고 zure blob 스토어에 직접 파일을 업로드할 수 있도록 html 양식을 만들 수 있습니까?S3와 GAW Blobstore 모두 이를 허용하지만 Zure Blob 스토리지에 대한 지원을 찾을 수 없습니다.

2019년 11월 편집

이제 공식 문서를 참조할 수 있습니다.

• BLOB 작업을 위한 Azure Storage JavaScript 클라이언트 라이브러리 샘플
• JavaScript용 Azure 스토리지 클라이언트 라이브러리

초답

브라우저용 New Azure Storage JavaScript 클라이언트 라이브러리(미리 보기)가 있습니다.

(이 게시물의 모든 내용은 위의 원본 기사에서 가져온 것입니다.)

• JavaScript Client Library for Azure Storage는 Blob, Table, Queue 및 File과 같은 스토리지 서비스를 사용하는 많은 웹 개발 시나리오를 지원하며 최신 브라우저와 호환됩니다.
• 새로운 JavaScript Client Library for Browser는 Azure Storage Client Library for Node.js를 사용하여 Browserify와 함께 구축되므로 최신 REST API 버전 2016-05-31에서 사용할 수 있는 모든 스토리지 기능을 지원합니다.

JavaScript 클라이언트 라이브러리는 인증 토큰을 브라우저에서 사용자에게 노출하므로 Azure 스토리지로 인증할 때 SAS 토큰을 사용하는 것이 좋습니다.범위와 시간이 제한된 SAS 토큰을 사용하는 것이 좋습니다.이상적인 웹 애플리케이션에서는 백엔드 애플리케이션이 사용자가 로그온할 때 사용자를 인증하고 스토리지 계정에 대한 액세스 권한을 부여하기 위해 클라이언트에 SAS 토큰을 제공해야 합니다.이렇게 하면 계정 키를 사용하여 인증할 필요가 없습니다.HTTP POST 요청 시 SAS 토큰을 생성하는 Github 저장소에서 Azure Function 샘플을 확인하십시오.

코드 샘플:

1. HTML 코드에 다음 스크립트 태그를 삽입합니다.JavaScript 파일이 동일한 폴더에 있는지 확인합니다.

   <script src="azure-storage.common.js"></script/>
   <script src="azure-storage.blob.js"></script/>
   

2. 이제 몇 가지 항목을 페이지에 추가하여 전송을 시작하겠습니다.BODY 태그 안에 다음 태그를 추가합니다.버튼을 클릭하면 uploadBlobFromText 메서드가 호출됩니다.다음 단계에서 이 방법을 정의합니다.

   <input type="text" id="text" name="text" value="Hello World!" />
   <button id="upload-button" onclick="uploadBlobFromText()">Upload</button>
   

3. 지금까지 클라이언트 라이브러리를 포함하고 HTML 코드를 추가하여 사용자에게 텍스트 입력과 전송을 시작하는 버튼을 보여주었습니다.사용자가 업로드 버튼을 클릭하면 uploadBlobFromText가 호출됩니다.이제 이를 정의해 보겠습니다.

   <script>
   function uploadBlobFromText() {
       // your account and SAS information
       var sasKey ="....";
       var blobUri = "http://<accountname>.blob.core.windows.net";
       var blobService = AzureStorage.createBlobServiceWithSas(blobUri, sasKey).withFilter(new AzureStorage.ExponentialRetryPolicyFilter());
       var text = document.getElementById('text');
       var btn = document.getElementById("upload-button");
       blobService.createBlockBlobFromText('mycontainer', 'myblob', text.value,  function(error, result, response){
           if (error) {
               alert('Upload filed, open browser console for more detailed info.');
               console.log(error);
           } else {
               alert('Upload successfully!');
           }
       });
   }
   </script>
   

브라우저에서 블로그 스토리지로 파일을 직접 업로드하려면 다음 블로그 게시물을 확인하십시오.

http://coderead.wordpress.com/2012/11/21/uploading-files-directly-to-blob-storage-from-the-browser/

http://gauravmantri.com/2013/02/16/uploading-large-files-in-windows-azure-blob-storage-using-shared-access-signature-html-and-javascript

두 번째 게시물(내가 작성한)은 HTML 5 File API를 사용하기 때문에 모든 브라우저에서 작동하지 않습니다.

기본 아이디어는 다음을 만드는 것입니다.Shared Access Signature (SAS)블롭 용기용입니다.에는 SAS가 .Write허가.Windows Azure Blob Storage는 아직 CORS를 지원하지 않으므로(Amazon S3와 Google에서 모두 지원), 사용자가 파일을 업로드할 수 있는 Blob Storage에서 HTML 페이지를 호스트해야 합니다.그런 다음 jQuery의 Ajax 기능을 사용할 수 있습니다.

이제 Windows Azure 스토리지 서비스가 CORS를 지원하므로 이를 수행할 수 있습니다.Windows Azure 스토리지 릴리스 - CORS, JSON, Minute Metrics 등의 발표를 여기에서 확인할 수 있습니다.

이 시나리오를 설명하는 간단한 예가 있습니다. http://www.contentmaster.com/azure/windows-azure-storage-cors/

이 예는 jQuery.jax를 사용하여 개인 블로그에서 직접 업로드 및 다운로드하는 방법을 보여줍니다.이 예에서는 공유 액세스 서명을 생성하기 위해 서버 구성 요소가 여전히 필요합니다. 이렇게 하면 클라이언트 코드에서 스토리지 계정 키를 노출할 필요가 없습니다.

HTML5 File API, AJAX 및 MVC 3을 사용하여 강력한 파일 업로드 제어를 구축하여 작업 진행률 및 작업 취소 모니터링 기능을 제공하여 대용량 파일을 Windows Azure Blob 스토리지에 안전하고 안정적으로 업로드할 수 있습니다.솔루션은 다음과 같이 작동합니다.

1. 사용자가 업로드한 파일을 승인하고 처리하는 클라이언트 측 JavaScript입니다.
2. JavaScript에서 보낸 파일 청크를 처리하는 서버 측 코드입니다.
3. JavaScript를 호출하는 클라이언트 측 UI입니다.

여기에서 샘플 코드 가져오기: HTML5 컨트롤을 통해 Windows Azure Blob Storage에 신뢰할 수 있는 업로드

나는 이것을 하는 방법에 대한 예를 들어 블로그 게시물을 작성했고, 코드는 깃허브에 있습니다.

Gaurav Mantris 게시물을 기반으로 하며 Blob Storage 자체에서 JavaScript를 호스팅하여 작동합니다.

1. 스토리지 계정에 적절한 CORS 규칙을 구성합니다.
2. 대상 컨테이너에서 공유 액세스 서명을 생성합니다.
3. BLOB 스토리지 SDK 설치:npm install @azure/storage-blob.
4. 파일이 Blob/Buffer/BufferArray라고 가정하면 코드에서 다음과 같은 작업을 수행할 수 있습니다.

import { ContainerClient } from "@azure/storage-blob";

const account = "your storage account name";
const container = "your container name";
const sas = "your shared access signature";
const containerClient = new ContainerClient(
  `https://${account}.blob.core.windows.net/${container}${sas}`
);

async function upload(fileName, file) {
  const blockBlobClient = containerClient.getBlockBlobClient(fileName);
  const result = await blockBlobClient.uploadData(file);
  console.log("uploaded", result);
}

언급URL : https://stackoverflow.com/questions/15670649/upload-file-to-azure-blob-storage-directly-from-browser