在django开发中，图片上传是我们经常需要做的，比如用户头像的上传，文章封面的上传；

下面我们来看一下具体的实现方式：

Ajax 上传图片

Ajax上传的好处在与我们上传后可以根据服务器返回的路径将上传成功的图片立即显示在页面上让用户可以看到；

具体上传方式如下：

html

# 1.添加隐藏域input，并将input的type设置为‘file’类型,设置onchange事件并将获取到的图片传到事件中
<input type="file" id="file" onchange="up_img(this.files[0])" style="display: none">
<section class="fixed">
    # 2.设置头像展示组件，并设置点击事件，当点击时调用第一步中的input点击事件
    <span><img src="/{{ user.icon }}" onclick="file.click()"></span>
    <p><a href="#">{{ user.name }}</a></p>
    <p><span class="glyphicon glyphicon-fire"></span><span>等级</span></p>
    <p><span class="glyphicon glyphicon-heart"></span>商品收藏</p>
</section>

# 3. 在input点击事件中使用Ajax将图片上传到服务器
<script>
// 上传头像
function up_img(file){
  let xhr = new XMLHttpRequest();  # 创建XMLHttpRequest对象
  xhr.open('post', '/main/upfile', true);  # post异步上传到/main/upfile路径
  xhr.onload = function () {
      # 上传成功后，在此处接收服务器返回的数据并进行处理
      let data = xhr.responseText;
      data = JSON.parse(data);
      console.log(data);
      $('.fixed img').attr('src', data['img'])  # 将返回的服务器图片地址添加到img中显示给用户
  };
  let formdata = new FormData();  # 使用formdata存储图片文件
  formdata.append('file', file);
  xhr.send(formdata);  # 发送请求
}
</script>

views.py

@csrf_exempt  # 去除csrf验证
def upfile(request):
    sava_path = '/static/main/img/cart.png'  # 默认图片
    if request.method == 'POST':
        files = request.FILES.get('file')  # 获取图片
        # 图片存放路径
        filename = encryption(str(time.time())) + '.' + files.content_type.split('/')[1]
        sava_path = 'static/main/user_file/' + filename

        # 将图片分段读取并写入文件
        with open(sava_path, 'wb') as f:
            for file in files.chunks():
                f.write(file)
                f.flush()
        # 将图片路径更新到当前用户的表中
        user = User.objects.filter(token=request.COOKIES.get('token'))
        user.update(icon=sava_path)
    # 将上传成功的图片路径返回给页面
    return JsonResponse({'img': sava_path})

效果展示：

多布局.gif