vue与django(drf)实现文件上传下载功能全过程

目录

• 文件上传功能
• 上传后端部分
• 上传前端部分（vue添加vue.js和node.js，设置eslint）
• 文件下载功能
• 下载后端部分
• 下载前端部分
• 总结

文件上传功能

上传后端部分

（一）Models.py

from django.db import models

class FilesModel(models.Model):                         //模型名（默认表名）
	name = models.CharField(max_length=20, default='')      //name，fle是字段名（file为上传的文件）
    file = models.FileField(upload_to='uploads/')         //upload上传功能实现，to上传后保存的路径

    class Meta:
        db_table = 'files_storage'             //自定义的表名
        ordering = ['-id']                     //按顺序排列

（二）Serializer.py

使用 Django REST framework 实现后端 REST API，需创建序列化器 serializers.py，内容如下：

from rest_framework import serializers
from files import models                           //files 是 app 的名字

class FilesSerializer(serializers.ModelSerializer):
    class Meta:
        model = models.FilesModel                      //指定模型
        fields = '__all__'                             //指定序列化的字段名

（三）views.py

from rest_framework.viewsets import ModelViewSet
from files import models, serializers

class FileViewSet(ModelViewSet):
    queryset = models.FilesModel.objects.all()             //返回全部字段
    serializer_class = serializers.FilesSerializer         //指定序列化器类型

（四）urls

1.项目总配置路径下（settings.py 所在的路径）编辑根路由配置文件 urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('storage/', include('files.urls'))         //网址前缀及指定某子app的url
]

2.app为files 的路径下新建 urls.py 文件，填写路由配置：

from django.urls import include, path
from rest_framework import routers
from files import views

router = routers.DefaultRouter()
router.register(r'files', views.FileViewSet)                   //注册路径

urlpatterns = [
    path('', include(router.urls))
]

（五）测试后端api

运行后台服务 python manage.py runserver 0.0.0.0:8000，访问 http://xx.xx.xx.xx:8000/storage/files/，界面如下：

上传前端部分（vue添加vue.js和node.js，设置eslint）

其中 el-upload 组件的 action 属性用于指定后台 API 的 URI；

:auto-upload 属性用于设置是否自动上传（这里设置为 false，手动触发上传动作）；

:on-success 属性用于指定上传成功后触发的方法。

submitUpload() 中的 this.$refs.upload.submit() 方法触发文件上传动作。

其中 el-upload 组件的 :data 属性用于指定文件上传时附加的数据（类型为 JavaScript 对象）。

注意：

1.env.development文件里改成BASE_API = ‘/api’

2.除增删改查外，上传的接口在index.vue文件里写了，不用额外在api文件夹里加接口

3.route里的函数调用后端接口

4.前端一个页面可对应后端多个接口

上传完成，后台数据如下：

[
    {
        "file": "http://172.20.23.34:8000/storage/files/uploads/AnyDesk.exe",
        "id": 19,
        "name": "测试文件"
    },
    {
        "file": "http://172.20.23.34:8000/storage/files/uploads/template.html",
        "id": 18,
        "name": ""
    },
    {
        "file": "http://172.20.23.34:8000/storage/files/uploads/20171215091830_55126_hSnPtZR.png",
        "id": 17,
        "name": ""
    }
]

文件下载功能

下载后端部分

views.py

    @action(methods=['get', 'post'], detail=True)
    def download(self, request, pk=None, *args, **kwargs):
        file_obj = self.get_object()
        response = FileResponse(open(file_obj.file.path, 'rb'))
        return response

下载前端部分

download.vue

总结

到此这篇关于vue与django(drf)实现文件上传下载功能的文章就介绍到这了,更多相关vue与django文件上传下载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！