Django使用Ajax上传图片只上传名字未上传文件

遇到这个问题确实很苦恼,我也不知道怎样说。
应该是把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)

还请大家指点迷津,不胜感激!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值