Django配置圖片上傳

標籤：imp   ret   datetime   setting   參數   style   使用者   func   name   

 本文首先實現django中上傳圖片的過程，然後解決富文字編輯器檔案上傳的問題。

一. 上傳圖片

1.在 settings.py 中配置MEDIA_URL  和 MEDIA_ROOT

   在 D:\blog_project  下建立檔案夾 uploads

MEDIA_URL = ‘/uploads/‘  # 上傳圖片的路徑：D:\blog_project\uploadsMEDIA_ROOT = os.path.join(BASE_DIR, ‘uploads‘)  # 上傳圖片的根路徑 BASE_DIR:D:\blog_project

 

2.在 urls.py 中配置路由

from django.conf import settings

urlpatterns = [    url(r‘^uploads/(?P<path>.*)$‘, ‘django.views.static.serve‘,        {‘document_root‘: settings.MEDIA_ROOT}),]

 

3.在 models.py 中設定圖片的上傳位置和路徑 

class User(AbstractUser):    avatar = models.ImageField(upload_to=‘avatar/%Y/%m‘, default=‘avatar/default.png‘, max_length=200, blank=True, null=True, verbose_name=‘帳戶圖片‘)    qq = models.CharField(max_length=20, blank=True, null=True, verbose_name=‘QQ號碼‘)    mobile = models.CharField(max_length=11, blank=True, null=True, unique=True, verbose_name=‘手機號碼‘)    url = models.URLField(max_length=100, blank=True, null=True, verbose_name=‘個人網頁地址‘)

註： 使用 ImageField 欄位來配置

        upload_to=‘avatar/%Y/%m‘ 為上傳的路徑格式，即在之前定義的根路徑下 D:\blog_project\uploads 上傳，D:\blog_project\uploads\avatar\2017\08\xxx.jpg

        avatar為路徑名，%Y為年份，%m為月份，當然%d為某一天。為上傳結果。

        在D:\blog_project\uploads\avatar\2017\08檔案夾下可以看到上傳成功的圖片，在網址http://127.0.0.1:8000/uploads/avatar/2017/08/21.jpg 查看網頁中的圖片。

        

 

二.在富文字編輯器中上傳圖片

1.在app目錄下建立upload.py檔案，為檔案上傳代碼。

# -*- coding: utf-8 -*-from django.http import HttpResponsefrom django.conf import settingsfrom django.views.decorators.csrf import csrf_exemptimport osimport uuidimport jsonimport datetime as dt@csrf_exempt  # 此裝飾器作用是不再驗證csrf的key，不用進行遠端資料表單的驗證def upload_image(request, dir_name):    ##################    #  kindeditor圖片上傳返回資料格式說明：    # {"error": 1, "message": "出錯資訊"}    # {"error": 0, "url": "圖片地址"}    ##################    result = {"error": 1, "message": "上傳出錯"}    files = request.FILES.get("imgFile", None)   #利用imgFile的原因是html檢查富文字編輯器中的上傳圖片按鈕時為 name=‘imgFile‘    if files:        result =image_upload(files, dir_name)    return HttpResponse(json.dumps(result), content_type="application/json")#目錄建立def upload_generation_dir(dir_name):    today = dt.datetime.today()    dir_name = dir_name + ‘/%d/%d/‘ %(today.year,today.month)    if not os.path.exists(settings.MEDIA_ROOT + dir_name):          os.makedirs(settings.MEDIA_ROOT + dir_name)    return dir_name# 圖片上傳def image_upload(files, dir_name):    #允許上傳檔案類型    allow_suffix =[‘jpg‘, ‘png‘, ‘jpeg‘, ‘gif‘, ‘bmp‘]    file_suffix = files.name.split(".")[-1]    if file_suffix not in allow_suffix:        return {"error": 1, "message": "圖片格式不正確"}    relative_path_file = upload_generation_dir(dir_name)    path=os.path.join(settings.MEDIA_ROOT, relative_path_file)    if not os.path.exists(path): #如果目錄不存在建立目錄        os.makedirs(path)    file_name=str(uuid.uuid1())+"."+file_suffix    path_file=os.path.join(path, file_name)    file_url = settings.MEDIA_URL + relative_path_file + file_name    open(path_file, ‘wb‘).write(files.file.read()) # 儲存圖片，完成上傳    return {"error": 0, "url": file_url}

2.配置urls.py

from blog.upload import upload_imageurlpatterns = [    url(r‘^admin/upload/(?P<dir_name>[^/]+)$‘, upload_image, name=‘upload_image‘),]

註：利用url發出請求時，這裡的參數<dir_name>上傳到upload_image中的dir_name參數。

3.修改config.js

  配置圖片上傳路徑。

 KindEditor.ready(function(K) {                     K.create(‘textarea[name=content]‘,{                         width:‘800px‘,                         height:‘200px‘,                         uploadJson:‘/admin/upload/kindeditor‘,  # 新添加的路徑                     }); });

在富文字編輯器中添加的圖片路徑為 D:\blog_project\uploads\kindeditor ，即上述代碼中新添加的路徑。

 

final

 

Django配置圖片上傳