django实现图片,视频保存在本地

37 阅读1分钟

1,创建django项目

django-admin startproject django_mysite4

2,创建app

python manage.py startapp polls

image.png

3,在polls下创建urls.py

4,djang_mysite4/urls.py

image.png

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.

image.png

5,polls/urls.py

from django.urls import path

from . import views

urlpatterns = [
    path('upload/',views.upload)
]

image.png

6,解决跨域问题

1,安装这个包

pip install -i https://pypi.douban.com/simple/ django-cors-headers

2,在settings.py中配置三个地方

image.png


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,最后在你的函数上面写个注解
如图所示

image.png

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>

image.png

8,新建media11文件夹

image.png

9,测试

image.png

image.png success!