django+vue实现前端文件上传以及后端文件处理返回
目录
创建vue、django项目
创建vue项目
命令创建
项目目录
文件初始化
创建django项目
django+vue运行
vue项目打包
django创建apps
配置django项目
vue页面路径修正
实现前后端图片文件的交互
前端vue
后端django
创建vue、django项目
创建vue项目
命令创建
进入create_vue目录，使用cmd打开终端，输入vue应用创建命令（fileUpload是项目名字、若出现package-name和project-name一致即可）
npm create vue@latest
cd fileUpload
npm install
npm run dev若项目能出现以下画面则创建成功
项目目录
将src文件夹中其他无关文件删除，最终的文件目录如下（其他如node_module、dist、等无关文件夹在此处已省略，我们只需要关心src目录下的文件）。
└─src
│ App.vue
│ main.js
└─components
HelloWorld.vue
文件初始化
HelloWorld.vue内容
this is helloworld
App.vue内容
main.js内容
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
到此为止vue项目已经创建完毕
创建django项目
可以使用windows命令行创建django项目，在这里为了方便我们使用pycharm帮助我们创建django项目，Application为空时默认使用父文件夹的文件名作为django项目的名字，输入Application name（runapps）后pycharm会默认创建一个runapps应用。
创建成功后我们在settings.py文件中加入import os即可运行django项目，出现如下画面表示django项目创建成功。
django+vue运行
vue项目打包
进入vue项目目录下执行以下命令将vue项目打包成dist文件夹，这个dist文件夹即为我们前端项目的打包文件
npm run builddjango创建apps
进入django项目，终端运行命令创建django的app，其中runapps为app的名称
python manage.py startapp runapps配置django项目
执行完毕后将program_django下面的urls.py复制到runapps目录下，修改program_django目录下的urls.py，此处url为项目路由，配置域名到应用的映射，即项目路由
program_django/urls.py
from django.contrib import admin
from django.urls import path,include
urlpatterns = [
path('admin/', admin.site.urls),
path("",include("runapps.urls"))
]
在我们创建的runapps的应用下在view.py文件里面配置视图，此处为后端应用的页面逻辑处理的地方、在urls.py文件下配置应用路由，即子域名到视图函数的映射。
runapps/urls.py
from django.urls import path
from django.views.generic import TemplateView
urlpatterns = [
path('', TemplateView.as_view(template_name='index.html')),
]
此处我们需要再django项目中创建文件夹放vue项目，创建web文件夹，将前端项目放入web文件夹中，并且在前端项目中创建static文件夹作为前端网页的静态资源，此时我们的项目结构如下所示
│ db.sqlite3
│ manage.py
├─program_django
│ │ asgi.py
│ │ settings.py
│ │ urls.py
│ └─wsgi.py
├─runapps
│ │ admin.py
│ │ apps.py
│ │ models.py
│ │ tests.py
│ │ urls.py
│ └─ views.py
└─web
└─dist
│ favicon.ico
│ index.html
└─static
│assets
└─ index-c7d3e1a4.js
进入program_django/setting.py文件中配置django项目按如下修改。
TEMPLATES=[{
'DIRS': []
}]
// 将以上内容修改为
TEMPLATES=[{
'DIRS': [BASE_DIR/"web/dist"]
}]
//添加如下设置
APPEND_SLASH=False
STATICFILES_DIRS=[
os.path.join(BASE_DIR,'web/dist/static')
]vue页面路径修正
进入web/dist/index.html
将script标签和link标签中src的路径修正为“static/assets/index-xxx.js”，js名字每个项目不同，只要路径无误即可。
此时运行django项目即可进入我们前端开发的项目了。
实现前后端图片文件的交互
前端vue
我们使用vue创建好项目后写入相应的html页面结构和对应的css样式代码，其中:src表示动态绑定变量作为src的值，@click=“submit”表示绑定鼠标点击事件为submit函数，@change=“filechange”表示当选中的文件发生变化事件调用的函数。
HelloWorld.vue
![]()
![]()
在js中若axios报错则需要进行安装axios，在前端项目下运行npm install axios即可安装完成，整个项目思路为获取用户选中的文件，使用全局变量进行存储，此处应该进行文件类型的校验，以便于图片预览，否则将无法展示图片。当用户点击提交时使用axios的post请求携带文件数据向后端请求处理后的图片。url表示向后端请求的子域名路由。
后端django
django项目中我们仅需要修改两个文件，runapps/views.py和runapps/urls.py
views.py
from django.http.response import HttpResponse
from django.views.decorators.csrf import csrf_exempt
from PIL import Image
import io
def get_django_img(origin_image):
img=Image.open(origin_image)
# 创建字节流管道对象
img_bytes=io.BytesIO()
img.convert("RGB")
img.save(img_bytes,format="png")
# 在字节流中获取二进制数据
return img_bytes.getvalue()
@csrf_exempt
def loadfile(request):
file=request.FILES.get("file")
# 获取表单中的文件
file_list=request.FILES.items()
if not file_list:
print("文件上传失败")
else:
img_bytes=get_django_img(file)
return HttpResponse(img_bytes,content_type="image/png")
urls.py
from django.urls import path
from django.views.generic import TemplateView
from runapps import views
urlpatterns = [
path('', TemplateView.as_view(template_name='index.html')),
path("loadfile/",views.loadfile)
]
urls.py中path的loadfile为前端请求的urls子域名，可修改但是需要二者对应，views.py中@csrf_exempt表示注释不需要csrf_token的检验，但是在正常项目中此项一般不做使用，容易造成跨域的问题。