如何使用angular作为前端将文件从C＃代码上传到azure，并通过api将文件传递给api控制器

Question

我正在开发一个应用程序，其中要求是将文件上载到Azure blob存储。 我尝试了角度nuget管理器中的azure-blob-storage-service插件。

任何人都可以建议任何其他方法，如使用c＃从服务器端上传它？

Answer 1

在这里， 您可以找到使用Angular SPA和web api 的优秀示例 ，它允许用户浏览和删除azure存储容器中的图像以及上传新文件。

它还说明了如何创建web api控制器以支持所需的服务器端操作

这是控制器的添加方法

public async Task<IEnumerable<PhotoViewModel>> Add(HttpRequestMessage request) 
{ 
    CloudBlobClient blobClient = this.StorageAccount.CreateCloudBlobClient(); 
    CloudBlobContainer photoContainer = blobClient.GetContainerReference(this.ContainerName); 

    var provider = new AzureBlobMultipartFormDataStreamProvider(photoContainer); 

    await request.Content.ReadAsMultipartAsync(provider); 

    var photos = new List<PhotoViewModel>(); 

    foreach (var file in provider.FileData) 
    { 
        //the LocalFileName is going to be the absolute Uri of the blob (see GetStream) 
        //use it to get the blob info to return to the client 
        var blob = await photoContainer.GetBlobReferenceFromServerAsync(file.LocalFileName); 
        await blob.FetchAttributesAsync(); 

        photos.Add(new PhotoViewModel 
        { 
            Name = blob.Name, 
            Size = blob.Properties.Length / 1024, 
            Created = blob.Metadata["Created"] == null ? DateTime.Now : DateTime.Parse(blob.Metadata["Created"]), 
            Modified = ((DateTimeOffset)blob.Properties.LastModified).DateTime, 
            Url = blob.Uri.AbsoluteUri 
        }); 
    } 

    return photos;       
}

它创建AzureBlobMultipartFormDataStreamProvider的一个实例，该实例派生自MultipartFormDataStreamProvider，以使用其原始名称将文件保存为派生类，而不是使用计算名称。

public class AzureBlobMultipartFormDataStreamProvider : MultipartFormDataStreamProvider 
{ 
    private CloudBlobContainer BlobContainer { get; set; } 

    public AzureBlobMultipartFormDataStreamProvider(CloudBlobContainer blobContainer): base("azure") 
    { 
        this.BlobContainer = blobContainer; 
    } 

    public override Stream GetStream(HttpContent parent, HttpContentHeaders headers) 
    { 
        if (parent == null) 
        { 
            throw new ArgumentNullException("parent"); 
        } 
        if (headers == null) 
        { 
            throw new ArgumentNullException("headers"); 
        } 

        var fileName = this.GetLocalFileName(headers);; 

        CloudBlockBlob blob = this.BlobContainer.GetBlockBlobReference(fileName); 
        blob.Metadata["Created"] = DateTime.Now.ToString(); 

        if (headers.ContentType != null) 
        { 
            blob.Properties.ContentType = headers.ContentType.MediaType; 
        } 

        this.FileData.Add(new MultipartFileData(headers, blob.Name)); 

        return blob.OpenWrite();             
    } 

    public override Task ExecutePostProcessingAsync() 
    {    

        return base.ExecutePostProcessingAsync(); 
    } 

    public override string GetLocalFileName(System.Net.Http.Headers.HttpContentHeaders headers) 
    { 
        //Make the file name URL safe and then use it & is the only disallowed url character allowed in a windows filename 
        var name = !string.IsNullOrWhiteSpace(headers.ContentDisposition.FileName) ? headers.ContentDisposition.FileName : "NoName"; 
        return name.Trim(new char[] { '"' }) 
                    .Replace("&", "and"); 
    } 
}

希望能帮助到你。

https://code.msdn.microsoft.com/windowsapps/AngularJS-with-Web-API-c05b3511/file/134548/3/AngularJS%20with%20Web%20API%20uploading%20files%20to%20Azure%20storage.zip