在django開(kāi)發(fā)中院峡，圖片上傳是我們經(jīng)常需要做的，比如用戶頭像的上傳拓售，文章封面的上傳折剃；
下面我們來(lái)看一下具體的實(shí)現(xiàn)方式：
Ajax 上傳圖片
Ajax上傳的好處在與我們上傳后可以根據(jù)服務(wù)器返回的路徑將上傳成功的圖片立即顯示在頁(yè)面上讓用戶可以看到；
具體上傳方式如下：
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>等級(jí)</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對(duì)象
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存儲(chǔ)圖片文件
formdata.append('file', file);
xhr.send(formdata); # 發(fā)送請(qǐng)求
}
</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
# 將圖片分段讀取并寫(xiě)入文件
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)
# 將上傳成功的圖片路徑返回給頁(yè)面
return JsonResponse({'img': sava_path})
效果展示：
多布局.gif
