1

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

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# 代码也将不胜感激！

提前致谢。

4

2 回答 2

3

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

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

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

    [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”参数将包含多张图片，因此只需枚举它们并根据需要上传即可.

祝你好运！

于 2014-07-07T21:43:49.643 回答
3

我最近不得不在 .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);
        }
    });
}
于 2019-01-25T13:36:46.407 回答