怎么在django中将图像文件存储到mysql数据库中

怎么在django中将图像文件存储到mysql数据库中

 

mysql数据库中字段设置

moders.py

class Img(models.Model):

    # upload_to="avatars/"  这是存储到本地的avatars/文件下面,如果没有文件夹就自动创建文件夹
    avatar = models.FileField(upload_to="avatars/", default="avatars/default.png", verbose_name="头像")

    def __str__(self):
        return self.avatar

    class Meta:
        db_table = "img"
        verbose_name = '图片'
        verbose_name_plural = verbose_name

 

views.py

def register(request):

    ret = {}

    if request.method == "POST":

           avatar_img = request.FILES.get("avatar")

           Img.objects.create(avatar=avatar_img)

               # ret为一个json格式,主要是给ajax返回消息,/index/是拿到数据后跳转的网页(随意填写)

           ret['msg'] = '/index/'

 

 

html代码

                <div class="form-group">
                    <label
                            class="col-sm-2 control-label">头像</label>
                    <div class="col-sm-8">
                        <label for="id_avatar"><img id="avatar-img" src="/static/img/default.png" alt=""></label>
                        <input accept="image/*" type="file" name="avatar" id="id_avatar" style="display: none">
                        <span class="help-block"></span>
                    </div>
                </div>

 

 

<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script>
    // 找到头像的input标签绑定change事件
    $("#id_avatar").change(function () {
        // 1. 创建一个读取文件的对象
        var fileReader = new FileReader();
        // 取到当前选中的头像文件
        // console.log(this.files[0]);
        // 读取你选中的那个文件
        fileReader.readAsDataURL(this.files[0]);  // 读取文件是需要时间的
        fileReader.onload = function () {
            // 2. 等上一步读完文件之后才 把图片加载到img标签中
            $("#avatar-img").attr("src", fileReader.result);
        };
    });
    // AJAX提交注册的数据
    $("#reg-submit").click(function () {
        // 取到用户填写的注册数据,向后端发送AJAX请求
        var formData = new FormData();    # 必须这样,设置formData
        formData.append("username", $("#id_username").val());
        formData.append("password", $("#id_password").val());
        formData.append("re_password", $("#id_re_password").val());
        formData.append("email", $("#id_email").val());
        formData.append("avatar", $("#id_avatar")[0].files[0]);
        formData.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());

        $.ajax({
            url: "/reg/",
            type: "post",
            processData: false, # 必须
            contentType: false,   # 必须
            data: formData,  #  # 必须
            success:function (data) {
                if (data.status){
                    // 有错误就展示错误
                    // console.log(data.msg);
                    // 将报错信息填写到页面上
                    $.each(data.msg, function (k,v) {
                        // console.log("id_"+k, v[0]);
                        // console.log($("#id_"+k));
                        $("#id_"+k).next("span").text(v[0]).parent().parent().addClass("has-error");
                    })

                }else {
                    // 没有错误就跳转到指定页面
                    location.href = data.msg;
                }
            }
        })
    });

 

 

    

 

 

 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页