C# summernote将图像上载到s3（asp.net）

在过去的两周里，我一直在挠头想办法解决这个问题

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

我可以从我的asp网站上传文件到S3，我的问题是我应该如何将文件“发送”到我的webmethod，是的，我使用的是webmethod，因为summernote代码是用js处理的，asp会理解它吗

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

我是用VB编程的，但是C代码也会被欣赏

---

提前谢谢。

我不懂VB，所以我希望这段C代码能帮助你

首先，我从来没有使用过amazon-s3，因此我不会提供一个例子来说明它的细节，但是在快速搜索时，我发现了另一个线程，其中用户指出如何使用内存流将图像实际上载到amazon

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

    [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”参数将包含多个图像，因此只需对它们进行枚举并根据需要进行上载

---

祝你好运

我不懂VB，所以我希望这段C代码能帮助你

首先，我从来没有使用过amazon-s3，因此我不会提供一个例子来说明它的细节，但是在快速搜索时，我发现了另一个线程，其中用户指出如何使用内存流将图像实际上载到amazon

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

    [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”参数将包含多个图像，因此只需对它们进行枚举并根据需要进行上载

---

祝你好运

我最近不得不在.NETCore中这样做

以下是将映像上载到s3的操作代码（您需要安装AWSSDK.s3）：

[HttpPost]
公共异步任务上载文件（IFormFile）
{
尝试
{
if（file！=null&&file.Length>0）
{
var relativePath=string.Empty；
使用（var client=newamazons3client（“awsAccessKeyId”、“awsSecretAccessKey”、RegionEndpoint.USEast1））
{
使用（var newMemoryStream=newMemoryStream（））
{
CopyTo文件（newMemoryStream）；
var uploadRequest=新的TransferUtilityUploadRequest
{
InputStream=newMemoryStream，
Key=file.FileName，
BucketName=“BucketName”，
CannedACL=S3CannedACL.PublicRead
};
var fileTransferUtility=新的TransferUtility（客户端）；
等待fileTransferUtility.UploadAsync（uploadRequest）；
relativePath=“urlS3”+“bucketName”+“/”+file.FileName；
}
}
返回Ok（新的{FileUrl=relativePath}）；
}
返回请求（“选择文件”）；
}
捕获（异常）
{
返回请求（异常消息）；
}
}

下面是要放在视图中的代码，用于覆盖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);
        }
    });
}

$（'.html编辑器'）.summernote({
回调：{
onImageUpload:函数（文件）{
for（设i=0；i

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

以下是将映像上载到s3的操作代码（您需要安装AWSSDK.s3）：

[HttpPost]
公共异步任务上载文件（IFormFile）
{
尝试
{
if（file！=null&&file.Length>0）
{
var relativePath=string.Empty；
使用（var client=newamazons3client（“awsAccessKeyId”、“awsSecretAccessKey”、RegionEndpoint.USEast1））
{
使用（var newMemoryStream=newMemoryStream（））
{
CopyTo文件（newMemoryStream）；
var uploadRequest=新的TransferUtilityUploadRequest
{
InputStream=newMemoryStream，
Key=file.FileName，
BucketName=“BucketName”，
CannedACL=S3Cann