使用 Summernote 将图像上传到 Azure Blob

Posted 2023-03-22

【中文标题】使用 Summernote 将图像上传到 Azure Blob

【英文标题】：Upload image to Azure blob with summernote

【发布时间】：2017-01-06 19:54:51

【问题描述】：

public class StorageService
    
        CloudStorageAccount storageAccount = CloudStorageAccount.Parse("DefaultEndpointsProtocol=removed for this post");

        public async Task Upload(string id, Stream data)
        
            CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();
            // Retrieve a reference to a container.
            CloudBlobContainer container = blobClient.GetContainerReference("images");

            await container.CreateIfNotExistsAsync();

            container.SetPermissions(
                new BlobContainerPermissions
                
                    PublicAccess = BlobContainerPublicAccessType.Blob
                );

            // Retrieve reference to a blob named "myblob".
            CloudBlockBlob blockBlob = container.GetBlockBlobReference(id);

            await blockBlob.UploadFromStreamAsync(data, data.Length);
        

        public async Task UploadBlogPhoto(string id, Stream data)
        
            CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();
            // Retrieve a reference to a container.
            CloudBlobContainer container = blobClient.GetContainerReference("mycontainer");

            await container.CreateIfNotExistsAsync();

            container.SetPermissions(
                new BlobContainerPermissions
                
                    PublicAccess = BlobContainerPublicAccessType.Blob
                );

            // Retrieve reference to a blob named "myblob".
            CloudBlockBlob blockBlob = container.GetBlockBlobReference(id);

            await blockBlob.UploadFromStreamAsync(data, data.Length);
        
    

所以我有了 StorageServices 类，我使用第一种方法 Upload 来上传用户的个人资料图片。

这里是标记：

using (html.BeginForm("UploadPhoto", "Manage", FormMethod.Post, new  enctype = "multipart/form-data" ))
            
                <div class="browseimg">
                    <input type="file" class="display-none" name="file" id="files" onchange="this.form.submit()" />
                </div>
            
            <button class="btn btn-primary width-100p main-bg round-border-bot" id="falseFiles">
                Upload billede
            </button>

这是用于上传照片的 summernote 按钮。帖子上传到数据库。但是，有没有办法将文本上传到数据库并将图像上传到 Azure blob？我需要先上传图片，然后将azure blob的URL添加到summernote中来异步执行吗？可以吗？

【问题讨论】：

我没有使用 Summernote，所以我不知道它是如何工作的，但考虑到 Azure Blob Storage 和 Summernote 是两个不同的数据存储，您需要执行两个操作：一个是上传 blob，另一个是然后写入这个 Summernote 数据库。尽管您只能在上传功能中执行这两种操作。首先将图片上传到blob存储中，等待它完成，然后插入文本。

【参考方案1】：

正如 Gaurav 所说，您可以在上传功能中执行这两种操作。在我看来，我建议您在上传操作中执行这两个操作，以确保数据一致性。在这里我提供一个代码示例，以便您更好地理解它。

ManageController.cs

/// <summary>
/// Upload photo with description
/// </summary>
/// <param name="imageNote">description of the photo</param>
/// <returns></returns>
public async Task<JsonResult> UploadPhoto(string imageNote)

    string operationResult = string.Empty;
    string uploadedImageUrl = string.Empty;
    uploadedImageUrl = await UploadImageToBlob();
    //make sure the image is uploaded successfully to Azure Blob
    if (!string.IsNullOrEmpty(uploadedImageUrl))
    
        //insert the image(blob) Url and imageNote to your database
        operationResult = "Operation is successful!";
    
    else
        operationResult = "Image upload failed, please check and submit again!";

    return Json(new
    
        Message = operationResult
    );


/// <summary>
/// Upload photo to Azure Blob Storage
/// </summary>
/// <returns>the new Blob(photo) Url</returns>
private async Task<string> UploadImageToBlob()

    string uploadedImageUrl = string.Empty;
    try
    
        var files = Request.Files;
        if (files != null && files.Count > 0)
        
            var file = files[0];
            string blobName = Path.GetFileName(file.FileName);

            #region upload image to Azure Blob and retrieve the Blob Url
            CloudStorageAccount storageAccount = CloudStorageAccount.Parse(CloudConfigurationManager.GetSetting("brucechenStorage"));
            CloudBlobClient blobClient = storageAccount.CreateCloudBlobClient();
            // Retrieve a reference to a container.
            CloudBlobContainer container = blobClient.GetContainerReference("images");
            await container.CreateIfNotExistsAsync();
            // Retrieve reference to a blob named "blobName".
            CloudBlockBlob blockBlob = container.GetBlockBlobReference(blobName);
            await blockBlob.UploadFromStreamAsync(file.InputStream);
            uploadedImageUrl = blockBlob.Uri.ToString();
            #endregion
        
    
    catch (Exception e)
    
        //TODO:log
    
    return uploadedImageUrl;