1

これを理解しようとすることについて、過去2週間、頭を悩ませてきました。

Summernote ( https://github.com/HackerWins/summernote ) は私の好みのエディターですが、画像を base64 として保存するのではなく、S3 にアップロードする必要があります。これは、データベースなどに対して大きすぎるためです。 summernote github ページ ( https://github.com/HackerWins/summernote/issues/72 ) を見つけましたが、.net コード サンプルはありません。

asp Web サイトから S3 にファイルをアップロードしても問題ありません。問題は、ファイルを webmethod に「送信」する方法です。それを理解します？

「ファイル」を送信して、サーバー側でオブジェクトとして受信しようとしましたが、「[object File]」文字列しか受信されません。

私は VB でコーディングしていますが、C# コードも歓迎します。

前もって感謝します。

4

2 に答える 2

3

私は VB をまったく知らないので、この C# コードが役に立てば幸いです。

まず第一に、私は amazon-s3 を使用したことがないため、具体的な例は提供しませんが、簡単な検索を行っているときに、ユーザーが Amazon に画像を実際にアップロードする方法について指摘している別のスレッドを見つけました。ここでメモリストリーム。

オプションは、サーバー側でアップロード アクションを作成することです。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 に答える