腳本之家服務器常用軟件

快捷導航

使用Django+Vue編寫一個文件上傳器

更新時間：2023年11月20日 10:49:03 作者：Cerelise_wong

本教程中,我將會使用Django和Vue創(chuàng)建一個支持多文件上傳的文件上傳器,您可以在單個文件和多個文件上傳之間選擇在應用中進行上傳操作,文章通過代碼示例截殺的非常詳細,需要的朋友可以參考下

前言

本教程中，我將會使用Django和Vue創(chuàng)建一個支持多文件上傳的文件上傳器。您可以在單個文件和多個文件上傳之間選擇在應用中進行上傳操作。因此在這里您可以在本教程中我們將要構(gòu)建的內(nèi)容：

在完成上傳操作以后，您可以在項目文件下找到上傳的文件，而且它們按照年月日進行了分類：

同名文字的處理：Django會對同名文件進行重命名處理，非常方便

這看上去很不錯。現(xiàn)在讓我們開始編碼吧！

Django部分

構(gòu)建Django項目

(可選)創(chuàng)建項目虛擬環(huán)境

其實使用本機的全局環(huán)境也是可以的，看個人喜好。

python -m venv env

激活虛擬環(huán)境

env\Scripts\activate

退出虛擬環(huán)境命令--deactivate

安裝Django及其他項目依賴

pip install django,django-cors-headers

創(chuàng)建Django app

python manage.py startapp document

完成上述操作后，項目目錄如下：

配置settings.py

添加document應用到INSTALL_APPS

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'

構(gòu)建document應用

創(chuàng)建模型(models.py)

進入document文件夾，為文件上傳創(chuàng)建數(shù)據(jù)庫模型

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)

upload_to文件存放位置：基于MEDIA_ROOT的起始路徑。這里的uploads/指文件將要存放在media目錄下新建的uploads文件夾，可往下遞推。

完成數(shù)據(jù)庫模型的設置后，轉(zhuǎn)到終端將設置寫入到數(shù)據(jù)庫

python manage.py makemigrations
python manage.py migrate

創(chuàng)建表單(forms.py)

我們可以新建一個新的表單用于提交上傳文件到數(shù)據(jù)庫

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()

編寫接口(views.py)

編寫views.py，添加multiply_upload接口，通過JsonResponse返回上傳狀態(tài)

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'})

添加路由(urls.py)

在app目錄下添加視圖路由

from django.urls import path
from . import views

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

在core目錄下添加api路由

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)

添加 static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) 是為了能夠在服務端地址上訪問media內(nèi)的文件

至此，django后端構(gòu)建完成，接下來編寫Vue代碼

Vue部分

這里主要編寫前后端的數(shù)據(jù)通信，使用axios發(fā)送http請求

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 = ''
}

添加一個按鈕以發(fā)送上傳請求

   <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>

處理跨域問題

通過django-cors-headers處理跨域請求(settings.py)

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

添加中間件corsheaders.middleware.CorsMiddleware

注意：跨域中間件要添加在django.middleware.common.CommonMiddleware之前

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',
]

配置跨域規(guī)則

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

github倉庫的項目使用的是yarn dev,使用yarn還是npm看個人喜好

后端

先遷移數(shù)據(jù)庫（克隆項目的情況下）

python manage.py makemigrations
python manage.py migrate

啟動項目

python manage.py runserver

測試效果

這看上去很酷，但是很多方面需要擴展，比如進度條，顯示上傳狀態(tài)...不過最基本的功能已經(jīng)實現(xiàn)，后面同學們可以根據(jù)自己的需要擴展功能。

寫在最后

這個后端示例并不是一個很好的示范，前后端分離模式下前端發(fā)送請求至django后端需要解決跨域問題和csrf跨站請求保護，跨域可以通過django-cors-headers解決，而csrf跨站請求需要csrfToken和csrfCookie雙重認證，由于筆者的水平有限，只能實現(xiàn)前端從后端請求csrftoken然后將其添加到請求頭中，但是沒有cookie仍是不能實現(xiàn)上傳。最后在后端通過django提供的裝飾器，為特定的視圖加上裝飾器進行csrf的豁免。

#FBV：直接在函數(shù)上方加裝飾器  @csrf_exempt  即可不驗證csrf

from django.views.decorators.csrf import csrf_exempt

@csrf_exempt
def multiply_upload(request):
      # 處理邏輯

如果有對這塊熟悉的朋友可以在評論區(qū)指導一下，我先在這里感謝各位了！

后面會更新使用rest_framework實現(xiàn)的類視圖的多文件上傳接口，我個人覺得使用DRF寫接口要方便得多，作為一個前端開發(fā)者，使用Django作為后端開發(fā)語言確實要得心應手一些。

再次感謝您的閱讀！

源碼參考：github

以上就是使用Django+Vue編寫一個文件上傳器的詳細內(nèi)容，更多關于Django+Vue文件上傳器的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: