遇到这个问题确实很苦恼,我也不知道怎样说。
应该是把Ajax想象的太强大了,还是我写错了。
当我们使用Ajax提交图片,前端的流程就是在Form下添加一个属性 enctype="multipart/form-data"
,然后submit
改为 button
,通过添加到Formdata
中进行提交到后台,后台的操作就是使用request.FILES.get('img')
获取这个Formdata
对象,通过Update
更新到数据库中,但是只改的名字没有上传,后来无奈只能进行切片数据,然后在写入。
疑问:
为何不能直接添加到数据库加上传文件?
前端:
<form id="form1" enctype="multipart/form-data">
<label for="id_avatar">点我更改头像:<img style="width: 80px;height: 80px;" id="avader" src="http://127.0.0.1:8000/upload/{{ row.headimg }}/"> </label>
<input style="display: inline-block;display: none" name="img" type="file" id="id_avatar">
<input id="publishArticle" class="btn btn-info" type="button" value="确认更改">
</form>
<script>
$('#id_avatar').change(function(){
//创建一个读取文件的对象
var fileReader = new FileReader();
//读取文件需要时间
fileReader.readAsDataURL((this.files[0]));
//将图片加载到img标签中 起到预览图片的作用 onload等上一步读完之后才把图片进行加载
fileReader.onload = function(){
$("#avader").attr("src",fileReader.result);
}
});
$("#publishArticle").click(function(){
var formdata = new FormData();
formdata.append("img",$('#id_avatar')[0].files[0]);
console.log($('#id_avatar')[0].files[0]);
$.ajax({
type: "POST",
url: '{% url 'file:board' %}',
data: formdata,
dataType: 'json',
cache: false,
//使用ajax传文件必须要使用下面两个
processData:false,
contentType:false,
success: function (arg) {
console.log("此处出现问题");
alert('成功发布')
}
})
})
</script>
后端:
img = request.FILES.get('img')
img_name =img.name
img_name01 = 'icon/'+img.name
file_path = os.path.join(settings.BASE_DIR,'upload/icon',img_name)
User.objects.filter(idcard=idcard).update(headimg=img_name01)
with open(file_path, 'wb') as f:
for chunk in img.chunks():
f.write(chunk)
还请大家指点迷津,不胜感激!