Question

我试图找出如何在我的asp.net mvc web项目中将配置文件图像上传到我的数据库。

问题是我获取数据URI而不是实际的文件上传，并且我的javascript中生成了URI，我不确定如何将URI以及表单中的其他输入字段传递给控制器。< / p>

查看 - 表单

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form", enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    <h4>Create a new account.</h4>
    <hr />
    @Html.ValidationSummary("", new { @class = "text-danger" })

    <div class="form-group">
        @Html.LabelFor(m => m.ProfilePicture, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            <div id="wrapper" style="margin-top: 20px;">
                <div class="image-editor">
                    <input type="file" class="cropit-image-input">
                    <div class="cropit-preview"></div>
                    <div class="image-size-label">
                        Resize image
                    </div>
                    <div class="controls-wrapper">
                        <div class="slider-wrapper">
                            <span class="icon icon-image small-image"></span>
                            <input type="range" class="cropit-image-zoom-input custom">
                            <span class="icon icon-image large-image"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.Password, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        @Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })
        <div class="col-md-10">
            @Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="hidden" name="profilePicture" class="hidden-image-data">
            <input type="submit" class="btn btn-default" value="Register"/>
        </div>
    </div>
}

表单下面的Javascript

<script src="~/Scripts/jquery.cropit.js"></script>
<script>
    $(function() {
        $('.image-editor').cropit({
            imageBackground: true,
            imageBackgroundBorderWidth: 20,
            initialZoom: 'image',
            smallImage: 'stretch',
            imageState: {
                src: '/Images/ProfilePictures/no-img.png'
            }
        });
        $('form').submit(function () {
            var imageData = $('.image-editor').cropit('export');
            // imageData containing the Data URI for the cropped image
            $('.hidden-image-data').val(imageData);
        });
    });
</script>

控制器 - 注册

public async Task<ActionResult> Register([Bind(Exclude = "ProfilePicture")]RegisterViewModel model) {
            if (ModelState.IsValid) {

                // To convert the user uploaded Photo as Byte Array before save to DB 
                byte[] imageData = null;
                if (Request.Files.Count > 0) {
                    HttpPostedFileBase poImgFile = Request.Files["ProfilePicture"];

                    using (var binary = new BinaryReader(poImgFile.InputStream)) {
                        imageData = binary.ReadBytes(poImgFile.ContentLength);
                    }
                }
.... more code ....
}
}

随意询问更多解释性详情。

Answer 1

数据URI是二进制数据的非二进制编码。那是你想要的数据。

它可能是base64编码的，因此您可以在编写之前在服务器端对其进行base64解码。

有this

以下链接网站的示例代码：

public class Base64Decoder
{
      public static void Main ()
      {
            string inputText = "This is some text.";
            Console.Out.WriteLine ("Input text: {0}", inputText);
            byte [] bytesToEncode = Encoding.UTF8.GetBytes (inputText);

            string encodedText = Convert.ToBase64String (bytesToEncode);
            Console.Out.WriteLine ("Encoded text: {0}", encodedText);

            byte [] decodedBytes = Convert.FromBase64String (encodedText);
            string decodedText = Encoding.UTF8.GetString (decodedBytes);
            Console.Out.WriteLine ("Decoded text: {0}", decodedText);

            Console.Out.Write ("Press enter to finish.");
            Console.In.ReadLine ();

            return;
      }
}

将图像上传到数据库

1 个答案: