VUE3与DRF文件上传

在Vue 3中，可以使用原生的<input type="file">元素来实现文件上传。以下是一个基本的文件上传的方法：

1. 首先，在Vue组件的template中添加一个<input type="file">元素：

<template>
  <div>
    <input type="file" ref="fileInput" @change="handleFileUpload">
    <button @click="uploadFile">上传文件</button>
  </div>
</template>

1. 在Vue组件的script中定义handleFileUpload和uploadFile方法：

<script>
export default {
  methods: {
    handleFileUpload() {
      this.selectedFile = this.$refs.fileInput.files[0];
    },
    uploadFile() {
      const formData = new FormData();
      formData.append('file', this.selectedFile);
      
      // 发送文件到服务器
      // 可以使用axios或其他XHR库发送文件到服务器
      // 示例：使用axios发送文件
      axios.post('/upload', formData)
        .then(response => {
          // 处理上传成功的响应
        })
        .catch(error => {
          // 处理上传失败的错误
        });
    }
  }
}
</script>

在handleFileUpload方法中，将选择的文件保存到selectedFile变量中。在uploadFile方法中，创建一个FormData对象，将选中的文件添加到formData中。然后，使用XHR库（如axios）将formData发送到服务器。

这是一个简单的文件上传方法，你可以根据实际需求进行调整。