后臺代碼
Models
編輯 models.py 代碼，通過 FileField 字段記錄文件信息：
from django.db import models
class FilesModel(models.Model):
file = models.FileField(upload_to='uploads/')
class Meta:
db_table = 'files_storage'
ordering = ['-id']
Serializer
這里使用 Django REST framework 實現(xiàn)后端 REST API，需要創(chuàng)建序列化器 serializers.py，內(nèi)容如下：
from rest_framework import serializers
# files 是 app 的名字
from files import models
class FilesSerializer(serializers.ModelSerializer):
class Meta:
model = models.FilesModel
fields = '__all__'
Views
編輯 views.py 代碼，內(nèi)容如下：
from rest_framework.viewsets import ModelViewSet
from files import models, serializers
class FileViewSet(ModelViewSet):
queryset = models.FilesModel.objects.all()
serializer_class = serializers.FilesSerializer
Urls
在 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))
]
在項目總配置路徑下（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'))
]
測試后端 API
運行后臺服務(wù) python manage.py runserver 0.0.0.0:8000，訪問 http://xx.xx.xx.xx:8000/storage/files/，界面如下：
Django REST framework
測試上傳文件，效果如下：
上傳成功
前端代碼（手動上傳）
借助 Element UI 的 upload 組件，Vue 代碼（index.vue）如下：
<template>
<div>
<el-upload
ref="upload"
drag
action="http://xx.xx.xx.xx:8000/storage/files/"
:auto-upload="false"
:on-success="onSuccess"
>
<i class="el-icon-upload" />
<div class="el-upload__text">將文件拖到此處，或<em>點擊上傳</em></div>
</el-upload>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上傳到服務(wù)器</el-button>
</div>
</template>
<script>
export default {
name: 'UploadDemo',
methods: {
submitUpload() {
this.$refs.upload.submit()
},
onSuccess() {
this.$message.success('上傳成功')
}
}
}
</script>
其中 el-upload 組件的 action 屬性用于指定后臺 API 的 URI；
:auto-upload 屬性用于設(shè)置是否自動上傳（這里設(shè)置為 false，手動觸發(fā)上傳動作）；
:on-success 屬性用于指定上傳成功后觸發(fā)的方法。
submitUpload() 中的 this.$refs.upload.submit() 方法觸發(fā)文件上傳動作。
界面如下：
上傳界面
測試文件上傳：
上傳成功
后臺數(shù)據(jù)如下：
[
{
"file": "http://172.20.23.34:8000/storage/files/uploads/template.html",
"id": 18
},
{
"file": "http://172.20.23.34:8000/storage/files/uploads/20171215091830_55126_hSnPtZR.png",
"id": 17
}
]
文件上傳的同時添加其他數(shù)據(jù)
修改數(shù)據(jù)庫模型
編輯后端 models.py 文件，添加其他字段：
from django.db import models
class FilesModel(models.Model):
name = models.CharField(max_length=20, default='')
file = models.FileField(upload_to='uploads/')
class Meta:
db_table = 'files_storage'
ordering = ['-id']
數(shù)據(jù)庫遷移后，重啟后臺 Web 服務(wù)。
后臺數(shù)據(jù)如下：
[
{
"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": ""
}
]
修改前端代碼
添加其他數(shù)據(jù)的輸入界面，同時將附加數(shù)據(jù)綁定到 el-upload 組件中：
<template>
<div>
<el-label>名稱</el-label>
<el-input v-model="fileData.name" style="width: 20%" />
<el-upload
ref="upload"
drag
class="upload-demo"
action="http://xx.xx.xx.xx:8000/storage/files/"
:data="fileData"
:auto-upload="false"
:on-success="onSuccess"
style="padding: 30px"
>
<i class="el-icon-upload" />
<div class="el-upload__text">將文件拖到此處，或<em>點擊上傳</em></div>
</el-upload>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上傳到服務(wù)器</el-button>
</div>
</template>
<script>
export default {
name: 'UploadDemo',
data() {
return {
fileData: {
name: ''
}
}
},
methods: {
submitUpload() {
this.$refs.upload.submit()
},
onSuccess() {
this.$message.success('上傳成功')
}
}
}
</script>
其中 el-upload 組件的 :data 屬性用于指定文件上傳時附加的數(shù)據(jù)（類型為 JavaScript 對象）。
文件上傳測試：
文件上傳（帶數(shù)據(jù)）
上傳完成，后臺數(shù)據(jù)如下：
[
{
"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），添加文件下載的 API 響應(yīng)邏輯：
from rest_framework.viewsets import ModelViewSet
from files import models, serializers
from rest_framework.decorators import action
from django.http import FileResponse
class FileViewSet(ModelViewSet):
queryset = models.FilesModel.objects.all()
serializer_class = serializers.FilesSerializer
@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
此時訪問 http://xx.xx.xx.xx:8000/storage/files/[id]/download/ 鏈接，即可直接下載上傳到服務(wù)器上的文件。
下載文件
$ curl -o anydesk.exe 172.20.23.34:8000/storage/files/19/download/
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 3584k 100 3584k 0 0 102M 0 --:--:-- --:--:-- --:--:-- 102M
