怎么在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;
}
}
})
});
81