使用Django+Vue编写一个文件上传器

python -m venv env

env\Scripts\activate

pip install django,django-cors-headers

python manage.py startapp document

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'document'
]

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / 'media'

from django.db import models


class Document(models.Model):
    document = models.FileField(upload_to='uploads/%Y/%m/%d')

    def __str__(self):
        return str(self.pk)

python manage.py makemigrations
python manage.py migrate

from django import forms

from .models import Document

class UploadForm(forms.ModelForm):
    class Meta:
        model = Document
        fields = ('document', )

    def save_multiple(self, documents):
        for file in documents:
            document = Document(document=file)
            document.save()

from django.middleware.csrf import get_token
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt

from .forms import UploadForm

@csrf_exempt
def multiply_upload(request):
    if request.FILES:
        form = UploadForm(request.FILES)
        if form.is_valid():
            documents = request.FILES.getlist('document')
            form.save_multiple(documents)

    return JsonResponse({'message': 'success'})

from django.urls import path
from . import views

urlpatterns = [
    path('multiply-upload/', views.multiply_upload, name='multiply_upload')
]

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

# 完整路径地址示例:http://example.com/api/multiply-upload/
urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('document.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

function multipleFilesUpload() {
   const formData = new FormData()
       files.value.forEach((file) => {
          formData.append('document', file)
	  })
	  axios
		.post('http://127.0.0.1:8000/api/multiply-upload/', formData, {
		     headers: {
			  'Content-Type': 'multipart/form-data',
		     },
		})
		.then((res) => console.log(res.data.message))
		.catch((error) => {
		     console.log('error :>> ', error)
		})
	  files.value = ''
}

   <button class="my-5 border border-gray-400 rounded-lg px-4 py-2 hover:bg-sky-400 hover:text-white duration-200"
		    @click="multipleFilesUpload">
			上传
   </button>

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders', 
    'document'
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

CORS_ALLOWED_ORIGINS = ["http://localhost:5173"]  # 前端地址
CORS_ALLOW_METHODS = [
    "DELETE",
    "GET",
    "OPTIONS",
    "PATCH",
    "POST",
    "PUT",
]
CORS_ALLOW_HEADERS = [
    "accept",
    "accept-encoding",
    "authorization",
    "content-type",
    "dnt",
    "origin",
    "user-agent",
    "x-csrftoken",
    "x-requested-with",
]

npm run dev

python manage.py makemigrations
python manage.py migrate

python manage.py runserver

#FBV：直接在函数上方加装饰器  @csrf_exempt  即可不验证csrf

from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
def multiply_upload(request):
      # 处理逻辑