目标

后端实现文件的上传和保存，类似简单的图片服务器功能
涉及到以下内容：
1.工程配置对应的参数，如settings下的MEDIA_ROOT和MEDIA_URL
2.解决跨域问题，如corsheaders解决浏览器跨域问题
3.文件的处理和本地保存

工程配置

思路

Django工程保存文件，需要在settings配置文件配置对应的参数，如
MEDIA_ROOT：附件的存储根路径
MEDIA_URL：附件对应的URL相对路径
其次，需要在工程目录新建对应文件夹，对应MEDIA_ROOT值

代码

settings.py代码片段

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

附件存储文件路径media

image.png

跨域

思路

浏览器出于安全考虑的目的，会存在跨域的安全策略导致请求异常（如下图），为了解决这一问题后端Django工程使用第三方工具corsheaders解决。

image.png

corsheaders使用步骤

1.工程运行环境安装corsheaders

pip install django-cors-headers

2.settings文件配置
INSTALLED_APPS注册corsheaders
MIDDLEWARE添加corsheaders.middleware.CorsMiddleware
ROOT_URLCONF设置为True，允许所有域名访问服务器

代码

settings.py代码如下

# Application definition
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'corsheaders', #corsheaders注册
    'apps.custom_auth'
]
# 允许所有域名来访问我们的服务器
CORS_ORIGIN_ALLOW_ALL = True

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',     #中间件使用注册
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

文件保存

思路

基于DRF的views.APIView实现post接口，读取和保存文件，并返回对应文件URL，指的关注的点：
1.文件名和格式的提取
2.完整的URL输出
3.附件的路由配置

代码

视图函数views.py

class AvatarUploadView(views.APIView):
    def save_file(self, file):
        # 随机数+文件后缀提取生产组合成新的文件名
        filename = shortuuid.uuid() + os.path.splitext(file.name)[-1]
        # 保存文件到本地
        with open(os.path.join(settings.MEDIA_ROOT, filename), 'wb') as fp:
            for chunk in file.chunks():
                fp.write(chunk)
        # 返回文件存储的路径
        return settings.MEDIA_URL + filename

    def post(self, request):
        file = request.FILES.get('file')
        filePath = self.save_file(file)
        # build_absolute_uri将相对url转化为完整的url
        file_url = request.build_absolute_uri(filePath)
        return Response({"picture": file_url})

路由配置url.py

from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
                  path('auth/', include('apps.custom_auth.urls')),
              ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

static静态文件的映射关系，URL和存储路径
settings.MEDIA_URL：附件的媒体根URL
document_root=settings.MEDIA_ROOT:附件存储的根路径