Django和Vue跨域配置以及保存图片到Django目录

2021-10-10 16:58:36 阅读：149 来源： 互联网

标签：Vue 跨域 img py django urls import Django data

Django配置

需要pip3 install django-cors-headers

设置secret_key

from django.core.management.utils import get_random_secret_key
get_random_secret_key()

`f/settings.py`

import os             #顶部导入

###设置secret_key
from django.core.management.utils import get_random_secret_key
get_random_secret_key()

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',   #添加放到CommonMiddleware上面
    # 'django.middleware.csrf.CsrfViewMiddleware',   #需要注释掉
]

UPLOAD_FILE= os.path.join(BASE_DIR,'upload')        #放在STATIC_URL下面，指定图片保存目录


# 跨域增加忽略，放在最下面
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True


CORS_ORIGIN_WHITELIST = (
    'http://127.0.0.1:8000',
)


CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)

CORS_ALLOW_HEADERS = (
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'Pragma',
)

`f/urls.py`

from django.contrib import admin
from django.urls import path,include
#导两个包
from django.views.static import serve
from f import settings



urlpatterns = [
    path('admin/', admin.site.urls),
    path('myapp/',include('myapp.urls')),
    path('upload/<path>',serve,{'document_root':settings.UPLOAD_FILE})
]

`myapp/views.py`

class Manage_User(GenericViewSet):
    """管理用户数据"""

    @action(methods=["POST"],detail=False)
    def img(self,request):
        image = request.FILES.get('file')
        print(111)
        #以防上传图片会覆盖以前的所以我们拼接一个时间戳解决
        image_name = datetime.datetime.now().strftime('%Y%m%d%H%M%S%f')+image.name
        f = open(os.path.join(settings.UPLOAD_FILE,image_name),'wb')
        #image.chunks() 以二进制流写入文件
        for i in image.chunks():
            f.write(i)
        f.close()
        mes={'code':200,'img_url':'http://127.0.0.1:8000/upload/'+image_name}
        return Response(mes)

`myapp/urls.py`

from rest_framework.routers import DefaultRouter
from myapp import views

router = DefaultRouter()
router.register('',views.HelloWorldViewSet,basename='hello')
router.register('user',views.Manage_User,basename='user')

urlpatterns = router.urls

Vue配置

`v/config/index.js`

proxyTable: {
  '/api':{
  target:'http://127.0.0.1:8000/',    #跨域ip
  changeOrigin:true,
  pathRewrite:{
      '^/api':''
      }
  }

`v/src/components/HelloWorld.vue`

<template>
    <div id="Img">
        商品图片：<input type="file" id="saveimage"><br>
        <button @click="addgoods()">添加</button>
        <img src="" id="img">
    </div>
</template>
<script>
import Qs from 'qs'
export default {
    data(){
        return{

        }
    },
    methods:{
        addgoods:function () {
            //定义data值，方便于传送数据
            var data = new FormData();
            //1.从input框里获取图片
            var img = document.getElementById('saveimage').files[0];
            //2.将图片添加到Formdata中
            data.append('file',img,img.name);
            this.axios({
                    url:'/api/myapp/user/img/',
                    method:'post',
                    data:data,
                    headers:{'Content-Type':'multipart/form-data'}
                }).then((res)=>{
                    document.getElementById('img').src=res.data.img_url
            })
        }
    }
}
</script>

v/src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

`v/src/main.js`

import axios from 'axios'
Vue.prototype.axios=axios

需要进入v，安装axios

cd v
cnpm install axios --save

标签：Vue,跨域,img,py,django,urls,import,Django,data
来源： https://blog.csdn.net/s_frozen/article/details/120688651

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9