使用 Summernote 将图像上传到 Azure Blob
Posted
技术标签:
【中文标题】使用 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;
【讨论】:
以上是关于使用 Summernote 将图像上传到 Azure Blob的主要内容,如果未能解决你的问题,请参考以下文章
summernote vue html编辑器不会将图像上传到服务器
尝试使用 Summernote 编辑器将图像 url 保存到数据库时删除样式属性