后台代码
Models
编辑 models.py
代码,通过 FileField
字段记录文件信息:
1 | from django.db import models |
Serializer
这里使用 Django REST framework 实现后端 REST API,需要创建序列化器 serializers.py
,内容如下:
1 | from rest_framework import serializers |
Views
编辑 views.py
代码,内容如下:
1 | from rest_framework.viewsets import ModelViewSet |
Urls
在 files 路径下新建 urls.py
文件,填写路由配置:
1 | from django.urls import include, path |
在项目总配置路径下(settings.py
所在的路径)编辑根路由配置文件 urls.py
:
1 | from django.contrib import admin |
测试后端 API
运行后台服务 python manage.py runserver 0.0.0.0:8000
,访问 http://xx.xx.xx.xx:8000/storage/files/,界面如下:
测试上传文件,效果如下:
前端代码(手动上传)
借助 Element UI 的 upload 组件,Vue 代码(index.vue
)如下:
1 | <template> |
其中 el-upload
组件的 action
属性用于指定后台 API 的 URI;:auto-upload
属性用于设置是否自动上传(这里设置为 false
,手动触发上传动作);:on-success
属性用于指定上传成功后触发的方法。
submitUpload()
中的 this.$refs.upload.submit()
方法触发文件上传动作。
界面如下:
测试文件上传:
后台数据如下:
1 | [ |
文件上传的同时添加其他数据
修改数据库模型
编辑后端 models.py
文件,添加其他字段:
1 | from django.db import models |
数据库迁移后,重启后台 Web 服务。
后台数据如下:
1 | [ |
修改前端代码
添加其他数据的输入界面,同时将附加数据绑定到 el-upload
组件中:
1 | <template> |
其中 el-upload
组件的 :data
属性用于指定文件上传时附加的数据(类型为 JavaScript 对象)。
文件上传测试:
上传完成,后台数据如下:
1 | [ |
文件下载
修改后台视图代码(views.py
),添加文件下载的 API 响应逻辑:
1 | from rest_framework.viewsets import ModelViewSet |
此时访问 http://xx.xx.xx.xx:8000/storage/files/[id]/download/ 链接,即可直接下载上传到服务器上的文件。
1 | $ curl -o anydesk.exe 172.20.23.34:8000/storage/files/19/download/ |
v1.5.2