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

Question

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

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# 代码也将受到赞赏！

提前致谢。

Answer 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”参数将包含多张图片，因此只需枚举它们并上传随意。

祝你好运！

Answer 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);
        }
    });
}