一. 创建Django项目
查看是否安装Django: `django-admin --version’
# 创建项目
django-admin startproject mysite
# 创建应用
py manage.py startapp fileUpload
# 运行项目
py manage.py runserver
二. 创建Vue项目
使用vue-cli脚手架创建新项目
安装vue-cli前, 需要先安装好 nodejs
# 全局安装vue-cli工具
npm install vue-cli -g
# 创建新项目
vue init webpack vue-project
# 项目正常启动, 安装vue辅助工具
npm install vue-router --save
npm install vuex --save
npm install vue-resource --save
npm install axios --save
# 运行项目
npm run dev
Tip: vue——解决“You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use /* eslint-disable */ to ignore all warnings in a file. ”
在build/webpack.base.conf.js文件中，注释或者删除掉：module->rules中有关eslint的规则
module: { rules: [ //...(config.dev.useEslint ? [createLintingRule()] : []), // 注释或者删除 { test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, ... } ] }
然后 npm run dev 就能正常运行了
三. Vue代码实现:
3.1 添加子组件
在 components 文件下创建一个自己的 组件文件（FileUpload.vue）
<template>
<div class="upload">
<form>
{{ name }}
<br><br>
<input type="file" value="" id="file" accept=".doc,.docx,.txt" @change="getFile($event)">
<button @click="submitForm($event)">提交</button>
<br>
{{ checkStatus }}
</form>
</div>
</template>
<script>
export default {
name:"upload",
data() {
return {
name: "上传文件",
checkStatus: ""
}
},
methods: {
getFile(event) {
this.file = event.target.files[0],
console.log(this.file)
},
submitForm(event) {
// event.preventDefault();
let formData = new FormData();
formData.append('file', this.file);
let config = {
headers: {
'Content-Type':'multipart/form-data'
}
};
// 创建一个空的axios 对象
const instance=this.$axios.create({
withCredentials: true, // 如果发送请求的时候需要带上token 验证之类的也可以写在这个对象里
headers: {
'Content-Type':'multipart/form-data'
}
})
instance.post('http://127.0.0.1:8000/fileUpload/upload/',formData).then(res=>{
if(res.data.code === 200) {
alert(res.data.msg);
this.checkStatus = res.data;
}else if(res.data.code === 2) {
alert(res.data.msg)
}else{
alert(res.data.msg);
}
})
}
},
}
</script>
<style scoped>
</style>
子组件创建好后 就要注册它，只有注册了才能使用
3.2 全局注册
main.js:
App.vue:
四. Django代码实现
4.1 mysite->setting.py通过设置解决跨域问题
cmd运行: python -m pip install django-cors-headers
解决跨域问题
在setting.py文件中增加下面内容
# 跨域增加忽略
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = [
'http://127.0.0.1:8080'
]
CORS_ALLOW_METHODS = [
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
]
CORS_ALLOW_HEADERS = (
'XMLHttpRequest',
'X_FILENAME',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
'Pragma',
)
并添加下面两行代码
如果出现403错误,请看:Forbidden (403) CSRF verification failed. Request aborted. - Django
4.2 添加接口信息
mysite文件夹下的urls.py添加红框内容:
fileUpload文件夹下新建 urls.py,并添加下面内容:
from django.urls import path
from . import views
urlpatterns = [
path('upload/', views.index, name='index'),
path('check/', views.check, name='check'),
]
4.3 fileUpload->views.py代码
import json
import os
import re
import time
import uuid
from django.http import HttpResponse
from django.middleware.csrf import get_token
from django.views.decorators.csrf import csrf_exempt
from django.views.decorators.http import require_http_methods
from django.conf import settings
@require_http_methods(["GET", "POST"])
@csrf_exempt
def index(request):
response = {}
try:
if request.method == 'GET':
get_token(request)
if request.method == 'POST':
req = request.FILES.get('file')
# 上传文件类型过滤
file_type = re.match(r'.*\.(txt|doc|docx)', req.name)
if not file_type:
response['code'] = 2
response['msg'] = '文件类型不匹配, 请重新上传'
return HttpResponse(json.dumps(response))
# 将上传的文件逐行读取保存到list中
file_info = {'date': '', 'name': '', 'uuid': '', 'path': ''}
content = []
for line in req.read().splitlines():
content.append(line)
# 打开特定的文件进行二进制的写操作
destination = open(
os.path.join("d://file", req.name), 'wb+')
for chunk in req.chunks(): # 分块写入文件
destination.write(chunk)
destination.close()
# 生成当前文件生成UUID
file_info['uuid'] = uuid.uuid1()
# 上传文件的时间
time_stamp = time.time()
now = int(round(time_stamp * 1000))
file_info['date'] = time.strftime('%Y-%m-%d %H:%M:%S', time.localtime(now / 1000))
# 文件名称
file_info['name'] = req.name
# 返回状态信息
response['check'] = check(content)
response['msg'] = "Success"
response['code'] = 200
except Exception as e:
response['msg'] = '服务器内部错误'
response['code'] = 1
return HttpResponse(json.dumps(response), content_type="application/json")
@csrf_exempt
def check(list):
print(list)
return '校验中'
