文章目录
-
- 前端
-
- 后台
前端
- axios api设置
export function project_file_add(data) {
return request({
url: '/api/project-file',
method: 'POST',
data
})
}
-
自动上传
vue代码
<template>
<div>
<el-upload
drag
multiple
:before-upload="beforeAvatarUpload"
:action="''"
:data="file"
:http-request="upload"
>
<i class="el-icon-upload" />
<div class="el-upload__text">
将文件拖到此处,或
<em>点击上传</em>
</div>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
</div>
</template>
<script>
import { project_file_add } from '@/api/project'
export default {
name: 'Demo',
data() {
return {
file: {
project: '1'
},
uploadurl: ''
}
},
methods: {
upload(param) {
const formData = new FormData()
formData.append('file', param.file)
formData.append('project', 1)
project_file_add(formData).then(_ => {
this.$message({
message: '文件上传成功',
type: 'success',
showClose: true
})
}
).catch(_ => {
this.$message({
message: '文件上传失败',
type: 'error',
showClose: true
})
}
)
},
beforeAvatarUpload(file) {
return true
},
submitUpload() {
this.$refs.upload.submit()
}
}
}
</script>
<style scoped>
</style>
-
手动上传
:auto-upload=“false” 手动上传一定要写明这个属性为false
<template>
<div>
<el-upload
ref="upload"
drag
multiple
:auto-upload="false"
:before-upload="beforeAvatarUpload"
:action="''"
:data="file"
:http-request="upload"
>
<i class="el-icon-upload" />
<div class="el-upload__text">
将文件拖到此处,或
<em>点击上传</em>
</div>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
<el-button style="margin-left: 250px;" size="small" type="success" @click="submitUpload">确认上传</el-button>
</div>
</template>
<script>
import { project_file_add } from '@/api/project'
export default {
name: 'Demo',
data() {
return {
file: {
project: '1'
},
uploadurl: ''
}
},
methods: {
upload(param) {
const formData = new FormData()
formData.append('file', param.file)
formData.append('project', 1)
project_file_add(formData).then(_ => {
this.$message({
message: '文件上传成功',
type: 'success',
showClose: true
})
}
).catch(_ => {
this.$message({
message: '文件上传失败',
type: 'error',
showClose: true
})
}
)
},
beforeAvatarUpload(file) {
return true
},
submitUpload() {
this.$refs.upload.submit()
}
}
}
</script>
<style scoped>
</style>
后台
- model
import os
from django.db import models
from python_vfeng_ICDaily_django import settings
from utils.base_mysql_model import BaseMysqlModel
def file_directory_path(instance, filename):
return os.path.join('uploads', 'project', str(instance.project.id), filename)
class ProjectFileModel(BaseMysqlModel):
file = models.FileField(upload_to=file_directory_path, null=False, blank=False, verbose_name='文件路径')
md5 = models.CharField(max_length=36, null=False, blank=False, verbose_name="MD5")
project = models.ForeignKey('ProjectModel', on_delete=models.CASCADE, related_name='files', null=False, blank=False,
verbose_name="项目类型")
uploader = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, null=False, verbose_name='上传者')
class Meta:
verbose_name = '项目附件'
verbose_name_plural = verbose_name
- view set
from rest_framework import permissions, filters
from project.filters import ProjectFileFilter
from project.models import ProjectFileModel
from project.serializer import ProjectFileSerializer
from utils.api_page_number_pagination import ApiPageNumberPagination
from utils.base_mysql_model_view_set import BaseMysqlModelViewSet
class ProjectFileViewSet(BaseMysqlModelViewSet):
queryset = ProjectFileModel.objects.all().order_by('-create_time')
serializer_class = ProjectFileSerializer
filter_class = ProjectFileFilter
# permission_classes = (permissions.AllowAny,)
permission_classes = (permissions.IsAuthenticated,)
pagination_class = ApiPageNumberPagination
def create(self, request, *args, **kwargs):
request.data['md5'] = 'b46a11d5aa530800d8b786527e6a6b5d' # hashlib.md5(request.FILES['file']).hexdigest()
request.data['uploader'] = request.user.id
return super().create(request, *args, **kwargs)
- Serializer
class ProjectFileSerializer(serializers.ModelSerializer):
uploader_name = serializers.CharField(source='uploader.cn', read_only=True)
file_name = serializers.SerializerMethodField()
create_time = serializers.DateTimeField(format='%Y-%m-%d %H:%M:%S', read_only=True)
class Meta:
model = ProjectFileModel
fields = '__all__'
def get_file_name(self, instance):
split_str = '/' + str(instance.project.id) + '/'
return instance.file.name.split(split_str)[-1]