Django文件上傳【單個/多個圖片上傳】

時間 2019-12-09

原文原文鏈接

準備工做

python：3.6.8
django：2.2.1

新建django項目html

肯定項目名稱、使用的虛擬環境【固然這個也能夠後期修改】、app的名稱python

建立成功，選擇在新的窗口中打開django

圖片上傳

修改配置文件DjangoFileUpload/settings.pysession

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media').replace('\\', '/')    #media即爲圖片上傳的根路徑

添加表模型FileUpload/models.pyapp

from django.db import models

class Img(models.Model):
    img_url = models.ImageField(upload_to='photos/',blank=True,null=True) #指定圖片上傳路徑，即media/photos/

數據遷移ide

python manage.py makemigrations

python manage.py migrate

(django_shop) ------------------------------------------------------------
~/Desktop/DjangoFileUpload » python manage.py makemigrations                                                                                      mosson@bogon
Migrations for 'fileUpload':
  fileUpload/migrations/0001_initial.py
    - Create model Img
(django_shop) ------------------------------------------------------------
~/Desktop/DjangoFileUpload » python manage.py migrate                                                                                             mosson@bogon
Operations to perform:
  Apply all migrations: admin, auth, contenttypes, fileUpload, sessions
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying admin.0003_logentry_add_action_flag_choices... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying auth.0009_alter_user_last_name_max_length... OK
  Applying auth.0010_alter_group_name_max_length... OK
  Applying auth.0011_update_proxy_permissions... OK
  Applying fileUpload.0001_initial... OK
  Applying sessions.0001_initial... OK
(django_shop) ------------------------------------------------------------
~/Desktop/DjangoFileUpload »

增長圖片上傳的路由 DjangoFileUpload/urls.pypost

from django.contrib import admin
from django.urls import path
from fileUpload import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path(r'uploadImg/',views.uploadImg,name='uploadImg'),
]

增長圖片上傳的視圖 views.pyui

from .models import Img

#圖片上傳
def uploadImg(request):
    if request.method == 'POST':
        img = Img(img_url=request.FILES.get('img'))
        img.save()
    return render(request, 'imgUpload.html')

新增頁面templates/imgUpload.htmlurl

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖片上傳</title>
</head>
<body>
    <form action="" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <input type="file" name="img">
        <input type="submit" value="上傳">
    </form>
</body>
</html>

項目啓動orm

(django_shop) ------------------------------------------------------------
~/Desktop/DjangoFileUpload » python manage.py runserver 0.0.0.0:8008                                                                              mosson@bogon
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
June 20, 2019 - 07:58:37
Django version 2.2.1, using settings 'DjangoFileUpload.settings'
Starting development server at http://0.0.0.0:8008/
Quit the server with CONTROL-C.

訪問頁面上傳圖片

到這裏已經完成了。

===============================分割線多圖上傳===============================

1 修改imgUpload.html

把<input type="file" name="img">
改爲<input type="file" name="img" multiple="">，就這一處而已，其餘都不動

2 views.py

from DjangoFileUpload.settings import BASE_DIR


def uploadImg(request):
    files = request.FILES.getlist('img')
    for f in files:
        destination = open(BASE_DIR + '/media/photos/' + f.name,'wb+')		#上傳的文件都放到/media/photos/文件夾裏
        for chunk in f.chunks(): 
            destination.write(chunk)
            destination.close()
    return render(request, 'imgUpload.html')

OK 多圖上傳已經完成　　

=======================碼字不易，多多支持===================================