前端如何向后端传文件？(ajax，form表单)

Ajax

ajax 发送文件需要借助于js内置对象FormData

1 利用js中的FormData内置对象生成一个formdata对象

2 将文件对象添加到formdata对象中，

3 基于ajax发送给后端

4 django后端会自动识别的formdata对象，并将问价数据解析并封装到request.Files中

实现代码

前端

<script>
    //点击按钮朝后端发送普通键值对和文件数据
    $('#d4').on('click',function (){
        // 1 需要先利用FomData内置对象
        let formDataObj =  new FormData();
        // 2 添加普通的键值对
        formDataObj.append('username',$('#d1').val());
        formDataObj.append('username',$('#d2').val());
        // 3 添加文件对象
        formDataObj.append('myfile',$('#d3')[0].files[0])
        // 4 将对象基于ajax发送给后端
        $.ajax({
            url:'',
            type:'post',
            data:formDataObj,//直接将对象放在data后面即可
            //ajax发送文件必须要指定的两个参数
            contentType:false, //不需要任何编码，django后端能够自动识别formdata对象
            processData: false, //处理数据=false ,告诉浏览器不要对数据进行任何处理
            success:function (args){
            }
        })
    })

</script>

后端

'后端'
def ab_file(request):
    if request.is_ajax():
        if request.method == 'POST':
            print(request.POST)
            print(request.FILES)
    return render(request, 'ab_file.html')

小总结

    1 需要利用内置对象 FormData
            // 2 添加普通的键值对
            formDataObj.append('username',$('#d1').val());
            formDataObj.append('username',$('#d2').val());
            // 3 添加文件对象
            formDataObj.append('myfile',$('#d3')[0].files[0])

     2 需要指定两个关键性的参数
            contentType:false, //不需要任何编码，django后端能够自动识别formdata对象
            processData: false, //处理数据=false ,告诉浏览器不要对数据进行任何处理
                
      3 django 后端能够直接识别到formdata对象，
            并且能够将'内部的普通键值自动解析并封装到request.POST中'， 
            '文件数据自动解析并封装到request.FILES中'

form表单

实现代码

前端

"""
form表单上传文件类型的数据：
1. 请求方式必须是post
2. enctype必须是form-data

multipart/form-data：通过post上传的数据包括文件时，form表单的enctype属性必须使用这种类型
"""


<form action="" method="post" enctype="multipart/form-data">
    <input type="text" name="username">
   上传文件：<input type="file" name="files">
    <input type="submit" value="提交">
</form>

后端

def files(request):
    if request.method == 'POST':
        # 只能获取到普通的键值对数据，文件不行
        # print(request.POST)

        # 获取文件数据
        print(request.FILES)

        # 获取文件对象 括号里面的名字，对应是是前端input框的名字('files')
        file_obj = request.FILES.get('files')
        print(file_obj.name)  # 取得文件对象的名字
        with open(file_obj.name, 'wb') as f:
            for line in file_obj.chunks(): # 推荐加上chunks方法，不加也行
                f.write(line)
        return HttpResponse('完毕')
    return render(request, 'files.html')

小总结：

总结：
        1 request.FILES  获取文件数据
        2 files_obj = reuqest.FILES.get('files') # 得到文件对象
        3 files_obj.name     # 得到文件的名字
        4 将文件写入 名字为路径
            with open(files_obj.name,'wb')as f:
                for line in files_obj:
                    f.write(line)
        将文件对象写入到指定路径