vue3中，通过el-upload向django上传图片

在Vue3中使用`el-upload`上传图片到Django服务器，可以按照以下步骤进行：

1. 安装`axios`，用来发送请求：

npm install axios

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

<template>
  <el-upload
    action="/your-upload-url/"
    :before-upload="beforeUpload"
    :on-success="handleSuccess"
    :on-error="handleError"
    :limit="1"
    :auto-upload="false">
    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
  </el-upload>
</template>

<script>
import axios from 'axios';

export default {
  methods: {
    // 上传前的校验
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJpgOrPng) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }

      return isJpgOrPng && isLt2M;
    },

    // 上传成功后的处理
    handleSuccess(response) {
      this.$message.success('上传成功');
    },

    // 上传失败后的处理
    handleError(error) {
      this.$message.error('上传失败');
    }
  }
}
</script>

3. 在Django中，需要安装`django-cors-headers`用来处理跨域问题。在`settings.py`中进行配置：

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

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

CORS_ORIGIN_ALLOW_ALL = True

4. 在Django中编写处理文件上传的视图函数：

from django.http import JsonResponse

def upload(request):
    if request.method == 'POST':
        file = request.FILES.get('file')
        # 处理上传的图片文件，比如存储在某个目录下或者存储在数据库中
        # 返回处理结果
        return JsonResponse({'success': True})
    else:
        return JsonResponse({'success': False, 'message': '请求方法不正确'})

5. 在前端组件中设置`el-upload`的`action`属性为Django中处理文件上传的URL，比如`/upload/`。同时，还需要在请求头中添加`X-CSRFToken`字段，以防止`CSRF`攻击：

<el-upload
  action="/upload/"
  :before-upload="beforeUpload"
  :on-success="handleSuccess"
  :on-error="handleError"
  :limit="1"
  :auto-upload="false"
  :headers="{'X-CSRFToken': csrfToken}">
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
</el-upload>

其中，`csrfToken`可以在Vue组件中设置为：

import Cookies from 'js-cookie';

export default {
  data() {
    return {
      csrfToken: Cookies.get('csrftoken')
    }
  }
}

这样就可以使用`el-upload`上传图片到Django服务器了。