Django項目實戰之用戶頭像上傳與訪問

1 將文件保存到服務器本地

upload.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

</head>
<body>

<form action="" method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <div>用戶名:<input type="text" name="username"></div>
    <div>頭像<input type="file" name="avatar"></div>
    <input type="submit" value="提交">
</form>

</body>
</html>

urls.py

from django.conf.urls import url
from app01 import views

urlpatterns = [
    url(r'^upload',views.upload)
]

views.py

from django.shortcuts import render,HttpResponse

def upload(request):
    if request.method == 'POST':
        name = request.POST.get('username')
        avatar = request.FILES.get('avatar')

        with open(avatar.name,'wb') as f:
            for line in avatar:
                f.write(line)
        return HttpResponse('ok')

    return render(request,'upload.html')

總結

這樣，我們就做好了一個基本的文件上傳小示例，這里需要注意的有幾點：

form表單里需要加上csrf_token驗證
文件的input框的type的值為file
在視圖函數中獲取文件要用request.FILES.get()方法
通過obj.name可以獲取文件的名字

2 將文件上傳到數據庫

models.py

from django.db import models


class User(models.Model):
    username = models.CharField(max_length=16)
    avatar = models.FileField(upload_to='avatar')

views.py

def upload(request):
    if request.method == 'POST':
        name = request.POST.get('username')
        avatar = request.FILES.get('avatar')

        models.User.objects.create(username=name,avatar=avatar)
        return HttpResponse('ok')

    return render(request,'upload.html')

總結

上面已經實現了將文件上傳到數據庫的功能，需要注意的有幾點：

所謂的上傳到數據庫，不是講圖片本身或者二進制碼放在數據庫，實際上也是將文件上傳到服務器本地，數據庫只是存了一個文件的路徑，這樣用戶要調用文件的時候就可以通過路徑去服務器指定的位置找了
創建ORM的時候，avatar字段要有一個upload_to=''的屬性，指定上傳后的文件放在哪里
往數據庫添加的時候，文件字段屬性賦值跟普通字段在形式上是一樣的，如：models.User.objects.create(username=name,avatar=avatar)
如果有兩個用戶上傳的文件名重復，系統會自動將文件改名，效果如下：

附加

功能我們是實現了，看起來我們在調用文件的時候，只需要通過數據庫文件路徑已經保存的文件本身就可以訪問圖片，讓它出現在網頁上，其實並不是這樣，

我們需要配置一些東西，django才可以找的到，不然的話就會過不了urls驗證，而我們之所以可以直接訪問static里的靜態文件，是因為django已經幫我們配置好了。

配置步驟如下：

1、在站點的setting.py里配置

 MEDIA_ROOT=os.path.join(BASE_DIR,"blog","media")  #blog是項目名，media是約定成俗的文件夾名
 MEDIA_URL="/media/"      # 跟STATIC_URL類似，指定用戶可以通過這個路徑找到文件

2、在urls.py里配置

from django.views.static import serve
from upload import settings                #upload是站點名

url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),

配置完后，就可以通過http://127.0.0.1:8001/media/milk.png訪問到圖片了

3 用AJAX提交文件

upload.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

<form>
    {% csrf_token %}
    <div>用戶名:<input id="name-input" type="text"></div>
    <div>頭像<input id="avatar-input" type="file"></div>
    <input id="submit-btn" type="button" value="提交">
</form>

<script src="/static/js/jquery-3.2.1.min.js"></script>
<script>
    $('#submit-btn').on('click',function () {
        formdata = new FormData();
        formdata.append('username',$('#name-input').val());

        formdata.append("avatar",$("#avatar")[0].files[0]);

       formdata.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val()); 
    $.ajax({
         processData:false,
         contentType:false, 
         url:'/upload', 
         type:'post', 
         data:formdata, 
         success:function (arg) { 
           if (arg.state == 1){ alert('成功！') }else { alert('失敗！') } } }) });
 </script> </body> </html>

views.py

from django.shortcuts import render,HttpResponse
from django.http import JsonResponse
from app01 import models

def upload(request):
    if request.method == 'POST':
        name = request.POST.get('username')
        avatar = request.FILES.get('avatar')

        try:
            models.User.objects.create(username=name,avatar=avatar)
            data = {'state':1}
        except:
            data = {'state':0}

        return JsonResponse(data)

    return render(request,'upload.html')

總結

Ajax上傳的時候，按鈕的tpye一定不要用submit
Ajax上傳的時候data參數的值不再是一個普通‘字典’類型的值，而是一個FormData對像
- 創建對象formdata = new FormData();
- 往里面添加值formdata.append('username',$('#name-input').val());
Ajax在做post提交的時候要加上csrf驗證
- formdata.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val());
最后，Ajax上傳文件的時候要有兩個參數設置

- processData:false
- contentType:false

4 上傳圖片文件的時候有預覽功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

<form>
    <!----用一個label標簽將上傳文件輸入框跟圖片綁定一起，
          點擊圖片的時候就相當於點擊了上傳文件的按鈕---->
    <label><img id="avatar-img" src="/static/img/default.png" width="80px" height="80px">
        <div>頭像<input id="avatar-input" hidden type="file"></div>
    </label>

    <input id="submit-btn" type="button" value="提交">
</form>

<script src="/static/js/jquery-3.2.1.min.js"></script>

<script>

    // 上傳文件按鈕（label里的圖片）點擊事件
    $('#avatar-input').on('change',function () {
        // 獲取用戶最后一次選擇的圖片
        var choose_file=$(this)[0].files[0];
        // 創建一個新的FileReader對象，用來讀取文件信息
        var reader=new FileReader();
        // 讀取用戶上傳的圖片的路徑
        reader.readAsDataURL(choose_file);
        // 讀取完畢之后，將圖片的src屬性修改成用戶上傳的圖片的本地路徑
        reader.onload=function () {
             $("#avatar-img").attr("src",reader.result)
        }
    });

</script>

5 大總結

對於文件上傳，不管是直接form提交也好，Ajax提交也好，根本問題是要告訴瀏覽器你要上傳的是一個文件而不是普通的字符串

而怎么樣告訴瀏覽器呢，就是通過請求體重的ContentType參數，我們上傳普通的字符串的時候不用指定，因為它有默認值，

而如果要傳文件的話，就要另外指定了。總結以下幾點

form表單上傳的話是通過 enctype="multipart/form-data" 來指定ContentType
ajax上傳的話是通過 processData:false 和 contentType:false來指定ContentType
form上傳的時候，文件數據是通過<input type="file">標簽來‘’包裹‘’數據，
ajax上傳的時候，是通過一個 FormData 實例對象來添加數據，傳遞的時候傳遞這個對象就行了
數據傳遞過去之后，是封裝在request.FILES里，而不是request.POST里

Django項目實戰之用戶頭像上傳與訪問

1 將文件保存到服務器本地

upload.html

urls.py

views.py

總結

2 將文件上傳到數據庫

models.py

views.py

總結

附加

3 用AJAX提交文件

upload.html

views.py

總結

4 上傳圖片文件的時候有預覽功能

5 大總結

免責聲明！