Pass cropper to IFormFile

[Edward-Zhou]

I am developing Asp.net Core MVC project. In MVC, there is IFormFile which is used to upload file. Here is my model ` public class RegisterViewModel { [Required] [EmailAddress] [Display(Name = "Email")] public string Email { get; set; }

    [Required]
    [StringLength(100, ErrorMessage = "The {0} must be at least {2} and at max {1} characters long.", MinimumLength = 6)]
    [DataType(DataType.Password)]
    [Display(Name = "Password")]
    public string Password { get; set; }

    [DataType(DataType.Password)]
    [Display(Name = "Confirm password")]
    [Compare("Password", ErrorMessage = "The password and confirmation password do not match.")]
    public string ConfirmPassword { get; set; }

    [Required]
    [Display(Name = "所属分组")]
    public int GroupId { get; set; }

    //[Required]
    [Display(Name = "用户头像")]
    public IFormFile Avator { get; set; }
}`

In View, `

头像预览图

可上传新头像

You can upload new image to crop container.

                    </div>

Without using cropper, the image is uploaded to public async Task Register(RegisterViewModel model,string returnUrl = null) . But after using cropper below, I do not know how to upload the result to my model. $(function () { var $image = $(".image-crop > img"); var $inputImage = $("#Avator"); $($image).cropper({ aspectRatio: 1, preview: ".img-preview", crop: function (e) { console.log("ok"); //@Model.Avator.=data; //$inputImage.val($image.cropper("getDataURL")); // Output the result data for cropping image. //$image.cropper("reset", true).cropper("replace", $image.cropper("getImageData")); //console.log("done"); $input.val(e.x + ", " + e.y + "," + e.width + "," + e.height); } }); `

[pavelakafoks]

Have a look at example here: https://github.com/pavelakafoks/cropper/tree/master/examples/crop-avatar