0

Kendo Upload コンポーネントが 2 回目のアップロードを実行することになっている場合、onUpload イベント ハンドラは起動されません。

私は剣道アップロードをcropperjs ( https://github.com/fengyuanchen/cropperjs/blob/master/README.md )で使用して画像をアップロードし、トリミングしてからサーバーに送信します。画像が大きすぎる場合、サーバーはエラーを送信します。ユーザーは、別のトリミング領域を選択して、画像を再度送信する必要があります。最後のステップでは何も起こりません。

画像をトリミングしてアップロードする方法は次のとおりです

        cropper.crop();
        var canvas = cropper.getCroppedCanvas();

        canvas.toBlob(function (blob) {
            image = blob;
            $("#file").data("kendoUpload").upload();
        });

次に、onUpload ハンドラーで、最初にトリミングされた画像がトリミングされた画像に置き換えられます。

    e.data = {
        file: image,
        userName: $("#User_Login").val()
    };

サーバー上でエラーが送信されます：

public virtual ActionResult UpdateUserImage([FromBody]HttpPostedFileBase file, [FromBody]string userName)
        {
            try
            {
                ImageHelper.CheckImage(file);
            }
            catch (Exception e)
            {
                return new LargeJsonResult(new
                {
                    error = e.Message,
                })
                {
                    StatusCode = HttpStatusCode.PreconditionFailed
                };
            }
           ...
        }

エラーは onError プロセス ハンドラで処理されます。

        var err = e.XMLHttpRequest;
        if (err.status === 412) {
            var body = JSON.parse(err.response);
            alert(body.error);
        }
        else {
            alert("Unable to upload the file. Please check that the 
                        size is less than 10Mb.");
        }

その後、ユーザーは既に選択されている画像を切り取ることができます。そして、トリミングされた領域を変更した後、上記の手順が繰り返されることが期待されます。しかし$("#file").data("kendoUpload").upload();、最初のコード ブロックの後では何も起こりません。ただし、onUpload イベント ハンドラーを呼び出す必要があると思います。

4

1 に答える 1

0

私は解決策を見つけました:)画像をサーバーに送信してそこでサイズを確認する代わりに、クライアントでサイズを確認し、必要に応じて送信を防ぎます。つまり、電話する前$("#file").data("kendoUpload").upload();に電話する

           if (image.size > 10 * 1024 * 1024) {
                alert("File is too big!");
                return;
            }

すべてOKです。しかし、onUpload イベント ハンドラーを起動しない理由を誰かがまだ$("#file").data("kendoUpload").upload();知っている場合は、私と考えを共有するのは素晴らしいことです :)

于 2019-02-04T02:57:33.967 に答える