Django后端分离 使用element-ui文件上传方式

Django后端分离使用element-ui文件上传方式随着前端技术的不断发展，前端与后端的分离越来越成为一种趋势。Django作为一个优秀的后端框架，也不例外。在Django后端分离的开发中，如何使用element-ui文件上传方式呢？

一、什么是Django后端分离？

Django后端分离是指前端通过AJAX向后端发送请求，并接收后端返回的JSON数据，前端通过DOM操作将数据渲染到页面上。Django后端分离的主要优势在于前后端耦合度低，前端和后端可以分别进行开发，相互独立。

二、什么是element-ui？

Element是一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库。Element-UI是基于Element的一套后台管理系统解决方案。Element-UI提供了一系列实用的组件，包括表单、表格、弹窗、菜单、按钮等，让开发者能够快速构建出美观、易用的后台管理系统。

三、文件上传的基本原理

在前端文件上传中，我们通常采用的是FormData对象。FormData对象可以通过append()方法将文件数据添加到表单中，然后通过XMLHttpRequest对象向后端发送请求。后端接收到请求后，解析出文件数据，保存到服务器上的指定路径中。

四、使用element-ui文件上传方式

1.安装依赖

在使用element-ui文件上传前，需要先安装element-ui和axios两个依赖库。可以通过npm install命令进行安装。

2.配置上传组件

在Vue组件中，可以使用el-upload组件来实现文件上传。在el-upload组件中，有action、headers、name、data等属性，分别用来指定上传路径、请求头、上传文件的name、上传时需要携带的数据。代码如下：

class="upload-demo"

ref="upload"

:action="uploadUrl"

:headers="headers"

:multiple="true"

:on-success="handleSuccess"

:on-error="handleError"

:before-upload="handleBeforeUpload"

:with-credentials="true"

:name="uploadName"

:data="uploadData"

>

点击上传

3.编写后端接口

在Django中，我们可以使用django-rest-framework来编写RESTful接口。在接口中，需要实现POST方法，获取前端发送的文件数据，并将文件保存到服务器上的指定路径中。代码如下：

from rest_framework.views import APIView

from rest_framework.response import Response

class UploadView(APIView):

def post(self,request,*args,**kwargs):

file_obj = request.FILES.get('file')

with open('media/' + file_obj.name,'wb+') as f:

for chunk in file_obj.chunks():

f.write(chunk)

return Response({'status': 'success'})

4.前后端联调

最后，我们需要进行前后端联调，检查文件上传是否成功。可以在Vue组件中，通过axios发送POST请求，将文件数据发送到后端接口中。代码如下：

import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:8000'

axios.defaults.withCredentials = true

axios.defaults.headers.common['Authorization'] = 'Bearer ' + window.localStorage.getItem('token')

const formData = new FormData()

formData.append('file',file)

axios.post('/api/upload/',formData,{headers: {'Content-Type': 'multipart/form-data'}})

.then(res => {

console.log(res)

})

.catch(err => {

console.log(err)

})

五、