在django開發(fā)中，圖片上傳是我們經(jīng)常需要做的，比如用戶頭像的上傳，文章封面的上傳；

下面我們來看一下具體的實(shí)現(xiàn)方式：

Ajax 上傳圖片

Ajax上傳的好處在與我們上傳后可以根據(jù)服務(wù)器返回的路徑將上傳成功的圖片立即顯示在頁面上讓用戶可以看到；

具體上傳方式如下：

html

# 1.添加隱藏域input，并將input的type設(shè)置為‘file’類型,設(shè)置onchange事件并將獲取到的圖片傳到事件中
<input type="file" id="file" onchange="up_img(this.files[0])" style="display: none">
<section class="fixed">
    # 2.設(shè)置頭像展示組件，并設(shè)置點(diǎn)擊事件，當(dāng)點(diǎn)擊時(shí)調(diào)用第一步中的input點(diǎn)擊事件
    <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點(diǎn)擊事件中使用Ajax將圖片上傳到服務(wù)器
<script>
// 上傳頭像
function up_img(file){
  let xhr = new XMLHttpRequest();  # 創(chuàng)建XMLHttpRequest對象
  xhr.open('post', '/main/upfile', true);  # post異步上傳到/main/upfile路徑
  xhr.onload = function () {
      # 上傳成功后，在此處接收服務(wù)器返回的數(shù)據(jù)并進(jìn)行處理
      let data = xhr.responseText;
      data = JSON.parse(data);
      console.log(data);
      $('.fixed img').attr('src', data['img'])  # 將返回的服務(wù)器圖片地址添加到img中顯示給用戶
  };
  let formdata = new FormData();  # 使用formdata存儲圖片文件
  formdata.append('file', file);
  xhr.send(formdata);  # 發(fā)送請求
}
</script>

views.py

@csrf_exempt  # 去除csrf驗(yàn)證
def upfile(request):
    sava_path = '/static/main/img/cart.png'  # 默認(rèn)圖片
    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()
        # 將圖片路徑更新到當(dāng)前用戶的表中
        user = User.objects.filter(token=request.COOKIES.get('token'))
        user.update(icon=sava_path)
    # 將上傳成功的圖片路徑返回給頁面
    return JsonResponse({'img': sava_path})

效果展示：

多布局.gif