summernote 上传图片到 s3 (asp.net)

Posted 2023-03-22

【中文标题】summernote 上传图片到 s3 (asp.net)

【英文标题】：summernote upload images to s3 (asp.net)

【发布时间】：2014-07-27 15:56:35

【问题描述】：

在过去的两周里，我一直在为试图弄清楚这一点而摸不着头脑。

Summernote (https://github.com/HackerWins/summernote) 是我首选的编辑器，但我需要将图像上传到 S3 而不是保存为 base64，因为这对于数据库等来说太大了。在 Summernote github 页面上我有找到了这个 (https://github.com/HackerWins/summernote/issues/72)，但没有 .net 代码示例。

我可以从我的 asp 网站将文件上传到 S3，我的问题是我应该如何将文件“发送”到我的 webmethod，是的，我正在使用 webmethod，因为 Summernote 代码在某种程度上是在 js 中处理的那asp会明白吗？

我已尝试发送“文件”，并在我的服务器端将其作为对象接收，但这只会导致接收到“[对象文件]”字符串。

我正在用 VB 编码，但 C# 代码也将受到赞赏！

提前致谢。

【参考方案1】：

我不懂VB，所以希望这段C#代码对你有所帮助。

首先，我从未使用过 amazon-s3，因此我不会提供具体示例，但是在进行快速搜索时，我发现了另一个线程，其中用户指出了如何将图像实际上传到amazon 使用内存流here。

一个选项是创建一个上传操作服务器端，这是使用 MVC 在 C# 中的 sn-p：

    [HttpPost]
    public ActionResult UploadImage(HttpPostedFileBase file)
    
        // TODO: your validation goes here, 
        // eg: file != null && file.ContentType.StartsWith("image/") etc...

        var imageUrl = _myAmazonWrapper.UploadImage(file.InputStream);

        return Json(imageUrl);
    

此操作结果将收到一个 HttpPostedFileBase 图像，其中包含具有内容类型、文件名等的实际图像。

最后剩下的就是summernote脚本的实际初始化了：

    $('#summernote').summernote(
        onImageUpload: uploadImages
    );

其中函数uploadImages可以定义如下：

var uploadImages = function (files, editor, $editable) 

    var formData = new FormData();
    formData.append("file", files[0]);

    $.ajax(
        url: "Image/UploadImage",
        data: formData,
        type: 'POST',
        cache: false,
        contentType: false,
        processData: false,
        success: function (imageUrl) 

            if (!imageUrl) 

                // handle error

                return;
            

            editor.insertImage($editable, imageUrl);
        ,
        error: function () 

            // handle error
        
    );
;

请注意，uploadImage 函数不支持多张图片，例如，您可以将图片拖放到 summernote 小部件，在这种特殊情况下，“files”参数将包含多张图片，因此只需枚举它们并上传随意。

祝你好运！

【参考方案2】：

我最近不得不在 .NET Core 中这样做。

这里是上传图片到s3的动作代码（需要安装AWSSDK.S3）：

[HttpPost]
public async Task<IActionResult> UploadFile(IFormFile file)

    try
    
        if (file != null && file.Length > 0)
        
            var relativePath = string.Empty;

            using (var client = new AmazonS3Client("awsAccessKeyId", "awsSecretAccessKey", RegionEndpoint.USEast1))
            
                using (var newMemoryStream = new MemoryStream())
                
                    file.CopyTo(newMemoryStream);

                    var uploadRequest = new TransferUtilityUploadRequest
                    
                        InputStream = newMemoryStream,
                        Key = file.FileName,
                        BucketName = "bucketName",
                        CannedACL = S3CannedACL.PublicRead
                    ;

                    var fileTransferUtility = new TransferUtility(client);
                    await fileTransferUtility.UploadAsync(uploadRequest);

                    relativePath = "urlS3" + "bucketName" + "/" + file.FileName;
                
            

            return Ok(new  FileUrl = relativePath );
        

        return BadRequest("Select a file");
    
    catch (Exception exception)
    
        return BadRequest(exception.Message);
    

下面是代码放在你的视图中，覆盖summernote的上传方法：

$('.html-editor').summernote(
    callbacks: 
        onImageUpload: function (files) 
            for (let i = 0; i < files.length; i++) 
                uploadImageToS3ForSummerNote(files[i]);
            
        
    
);

function uploadImageToS3ForSummerNote(file) 
    var url = '@Url.Action("UploadFile", "MyController")';

    formData = new FormData();
    formData.append("file", file);
    $.ajax(
        type: 'POST',
        url: url,
        data: formData,
        cache: false,
        contentType: false,
        processData: false,
        success: function (data) 
            $('.html-editor').summernote('insertImage', data.fileUrl);
        ,
        error: function (data) 
            alert(data.responseText);
        
    );