vue3中，使用el-upload向后端Django传递图片

在Vue3中，可以使用el-upload组件来上传图片到后端Django。以下是一个简单的示例：

1. 安装el-upload和axios

npm install element-plus axios

2. 在Vue组件中引入el-upload和axios

<template>
  <el-upload
    class="upload-demo"
    action="/api/upload/"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :show-file-list="false"
  >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
import axios from 'axios'
import { ElUpload, ElButton } from 'element-plus'

export default {
  components: {
    ElUpload,
    ElButton
  },
  methods: {
    beforeUpload(file) {
      // 可以在这里添加上传前的验证逻辑
    },
    handleSuccess(response, file, fileList) {
      console.log(response)
      // 在这里处理上传成功后的逻辑
    }
  }
}
</script>

3. 后端Django代码

在Django中，可以使用Django REST framework来处理文件上传。以下是一个简单的示例：

from rest_framework.views import APIView
from rest_framework.parsers import MultiPartParser
from rest_framework.response import Response

class UploadView(APIView):
    parser_classes = [MultiPartParser]

    def post(self, request, format=None):
        file_obj = request.data['file']
        # 处理文件上传的逻辑
        return Response({'success': True})

在Django中，需要安装`djangorestframework`和`django-cors-headers`来处理跨域请求。可以使用以下命令来安装它们：

pip install djangorestframework django-cors-headers

同时，需要在Django的`settings.py`文件中添加以下配置：

INSTALLED_APPS = [
    'rest_framework',
    'corsheaders',
    # ...
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # ...
]

CORS_ORIGIN_ALLOW_ALL = True