vue3中，通过el-upload向django上传图片，并同时传递当前的用户名

在 Vue3 中，可以通过在 `el-upload` 的 `before-upload` 方法中将用户名作为参数传递给 Django 后端。具体实现步骤如下：

1. 在 `el-upload` 组件中添加 `before-upload` 属性，将其绑定到一个方法上，例如 `handleBeforeUpload`。

<el-upload
  class="upload-demo"
  action="/your-upload-url"
  :before-upload="handleBeforeUpload"
  :headers="{'X-CSRFToken': csrf_token}"
  :data="{username: username}">
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

2. 在 `handleBeforeUpload` 方法中，将当前用户的用户名作为参数传递给后端。可以使用 `FormData` 对象来构造表单数据，并通过 `append` 方法添加用户名字段。

methods: {
  handleBeforeUpload(file) {
    const formData = new FormData();
    formData.append('file', file);
    formData.append('username', this.username);
    return formData;
  }
}

3. 在 Django 后端中，可以通过 `request.POST.get('username')` 获取到传递的用户名参数，从而进行后续的操作。

需要注意的是，`el-upload` 组件上传文件时，会将表单数据以 `multipart/form-data` 的形式提交，因此需要在请求头中添加 `X-CSRFToken` 字段，以防止跨站请求伪造（CSRF）攻击。同时，需要在 `el-upload` 组件中使用 `:data` 属性来添加非文件类型的参数，例如用户名字段。