Vue Element + Django REST framework 实现文件的上传功能

文件上传作为开发中经常使用的功能，本篇文章意在将此功能封装成一个组件，在有需要的时候直接拿来使用。

逻辑思路

用户上传文件，文件自动提交
文件提交后返回文件的url路径
将返回来的url路径随其它字段一块提交给后台。
后台拿到请求的数据，保存到数据库中。

后台接口设计

model设计

这里model我们只需要上传文件，所以直接编写一个字段信息即可。

class FilesModel(models.Model):
    """ 文件上传 """
    file = models.FileField(upload_to='uploads/')

    class Meta:
        db_table = 'files'
        ordering = ['-id']

settings

这里面settings得添加文件根路径的设置。

# 媒体文件设置
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

这样以后所有上传的文件都保存在根目录的“/media/uploads/”路径下。

serializer

后端用的是 Django REST framework 来实现后端的REST API，需要进行序列化。

class FilesSerializer(serializers.ModelSerializer):
    """ 文件上传专用 """
    class Meta:
        model = FilesModel
        fields = '__all__'

views

views试图代码如下：

class FileViewset(viewsets.ModelViewSet):
    """ 文件上传 """
    authentication_classes = (JSONWebTokenAuthentication, SessionAuthentication)
    queryset = FilesModel.objects.all()
    serializer_class = FilesSerializer

urls

填写路由配置

router = DefaultRouter()
router.register(r'files', views.FileViewset, basename='files')

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

test

运行django项目，访问 http://127.0.0.1:8000/files/ 进行测试

file.png

前端界面

这里使用 Element-UI 里面的 Upload 上传组件

文件上传组件

新建 FileUpload.vue 文件来封装文件上传的组件。

参数详解

action：上传的地址，也就是后端上传文件的接口地址，这里通过 postUrl 函数来获取。

on-success：文件上传成功的钩子，当文件上传成功时，返回该文件的地址，并通过子组件传父组件的方式返回给父组件。

on-remove：文件移除时的钩子，当文件移除时，页面提示用户文件已经移除。

limit：文件最大允许上传的个数，我们这个场景里限制只传1个。

on-exceed：文件上传个数限制的钩子，上面限制一个文件，再次上传提示上传失败。

file-list：上传的文件列表。

这样，一个文件上传的组件封装完成。

组件使用

在需要使用文件上传功能的地方直接引用组件，并给组件绑定一个函数来获取组件里面返回的文件url路径。

这样file即为文件上传的地址，后面使用的时候直接调用file的值即可。

Vue Element + Django REST framework 实现文件的上传功能