1,创建django项目
django-admin startproject django_mysite4
2,创建app
python manage.py startapp polls
3,在polls下创建urls.py
4,djang_mysite4/urls.py
5,polls/view.py
from django.http import HttpResponse
from django.shortcuts import render
from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def upload(request):
pic = request.FILES['img']
print(pic.name)
imgurl = 'polls/media11/'+pic.name
with open(imgurl, 'wb') as f:
for data in pic.chunks():
f.write(data)
return HttpResponse('本地视频保存成功')
# Create your views here.
5,polls/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('upload/',views.upload)
]
6,解决跨域问题
1,安装这个包
pip install -i https://pypi.douban.com/simple/ django-cors-headers
2,在settings.py中配置三个地方
INSTALLED_APPS = [
'corsheaders',
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
CORS_ORIGIN_ALLOW_ALL=True
如图所示,分别是第34,45,55行
3,最后在你的函数上面写个注解
如图所示
7,前端
npm install axios
<template>
<div>
<div>
<input type="file" @change="handleFileUpload">
<button @click="uploadFile">Upload</button>
</div>
</div>
</template>
<script>
import axios from "axios";
export default {
name:'uploadTest2',
methods: {
handleFileUpload(event) {
this.selectedFile = event.target.files[0];
},
uploadFile() {
const formData = new FormData();
formData.append('img', this.selectedFile);
console.log('formdata---->',formData)
axios.post('http://127.0.0.1:8000/polls/upload/', formData)
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
}
},
data() {
return {
selectedFile: null
};
}
}
</script>
8,新建media11文件夹
9,测试
success!