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

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

本教程中,我将会使用Django和Vue创建一个支持多文件上传的文件上传器,您可以在单个文件和多个文件上传之间选择在应用中进行上传操作,文章通过代码示例截杀的非常详细,需要的朋友可以参考下

前言

本教程中，我将会使用Django和Vue创建一个支持多文件上传的文件上传器。您可以在单个文件和多个文件上传之间选择在应用中进行上传操作。因此在这里您可以在本教程中我们将要构建的内容：

在完成上传操作以后，您可以在项目文件下找到上传的文件，而且它们按照年月日进行了分类：

同名文字的处理：Django会对同名文件进行重命名处理，非常方便

这看上去很不错。现在让我们开始编码吧！

Django部分

构建Django项目

(可选)创建项目虚拟环境

其实使用本机的全局环境也是可以的，看个人喜好。

python -m venv env

激活虚拟环境

env\Scripts\activate

退出虚拟环境命令--deactivate

安装Django及其他项目依赖

pip install django,django-cors-headers

创建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'

构建document应用

创建模型(models.py)

进入document文件夹，为文件上传创建数据库模型

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文件夹，可往下递推。

完成数据库模型的设置后，转到终端将设置写入到数据库

python manage.py makemigrations
python manage.py migrate

创建表单(forms.py)

我们可以新建一个新的表单用于提交上传文件到数据库

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返回上传状态

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内的文件

至此，django后端构建完成，接下来编写Vue代码

Vue部分

这里主要编写前后端的数据通信，使用axios发送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 = ''
}

添加一个按钮以发送上传请求

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

配置跨域规则

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看个人喜好

后端

先迁移数据库（克隆项目的情况下）

python manage.py makemigrations
python manage.py migrate

启动项目

python manage.py runserver

测试效果

这看上去很酷，但是很多方面需要扩展，比如进度条，显示上传状态...不过最基本的功能已经实现，后面同学们可以根据自己的需要扩展功能。

写在最后

这个后端示例并不是一个很好的示范，前后端分离模式下前端发送请求至django后端需要解决跨域问题和csrf跨站请求保护，跨域可以通过django-cors-headers解决，而csrf跨站请求需要csrfToken和csrfCookie双重认证，由于笔者的水平有限，只能实现前端从后端请求csrftoken然后将其添加到请求头中，但是没有cookie仍是不能实现上传。最后在后端通过django提供的装饰器，为特定的视图加上装饰器进行csrf的豁免。

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

from django.views.decorators.csrf import csrf_exempt

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

如果有对这块熟悉的朋友可以在评论区指导一下，我先在这里感谢各位了！

后面会更新使用rest_framework实现的类视图的多文件上传接口，我个人觉得使用DRF写接口要方便得多，作为一个前端开发者，使用Django作为后端开发语言确实要得心应手一些。

再次感谢您的阅读！

源码参考：github

以上就是使用Django+Vue编写一个文件上传器的详细内容，更多关于Django+Vue文件上传器的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

4款Python 类型检查工具,你选择哪个呢？
这篇文章主要介绍了4款Python 类型检查工具的相关资料，帮助是及早检查，提前发现类型的错误，增强代码的一致性与可维护性。（还有防止脱发，喵），感兴趣的朋友可以了解下
2020-10-10
Python不使用库进行矩阵运算详解
这篇文章主要介绍了Python不使用库进行矩阵运算详解,矩阵乘法中,需要判断两个矩阵是否可以进行相乘,即前一个矩阵的列是否等于后一个矩阵的行,,需要的朋友可以参考下
2023-08-08
Python使用爬虫猜密码
我们可以通过python 来实现这样一个简单的爬虫猜密码功能。下面就看看如何使用python来实现这样一个功能，对python爬虫猜密码相关知识感兴趣的朋友参考下吧
2016-02-02
Python pandas找出、删除重复的数据实例
在面试中很可能遇到给定一个含有重复元素的列表,删除其中重复的元素,下面这篇文章主要给大家介绍了关于Python pandas找出、删除重复数据的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-07-07
Python实现matplotlib显示中文的方法详解
这篇文章主要介绍了Python实现matplotlib显示中文的方法,结合实例形式详细总结分析了Python使用matplotlib库绘图时显示中文的相关操作技巧与注意事项,需要的朋友可以参考下
2018-02-02
Python库Cerberus数据验证如何保证系统安全性正确性实例分析
本文带大家探索 Cerberus 库,看看它是如何帮助我们在开发过程中保障数据的安全性和完整性的,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2024-01-01
关于探究python中sys.argv时遇到的问题详解
这篇文章主要给大家介绍了python里sys.argv时遇到问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-02-02
python元组和字典的内建函数实例详解
这篇文章主要介绍了python元组和字典的内建函数,结合实例形式详细分析了Python元组和字典的各种常见内建函数功能与相关使用技巧,需要的朋友可以参考下
2019-10-10
Python中操作MySQL入门实例
这篇文章主要介绍了Python中操作MySQL入门实例,本文讲解了安装、打开数据库连接、插入数据、查询数据、删除数据等操作,需要的朋友可以参考下
2015-02-02
pandas删除部分数据后重新生成索引的实现
这篇文章主要介绍了pandas删除部分数据后重新生成索引的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07