使用vue实现上传文件、上传者、上传文件的文件名的功能

好的，我可以帮您回答这个问题。首先，需要在Vue组件中添加一个文件上传的input标签，如下示：

<template>
  <div>
    <input type="file" @change="handleFileUpload">
    <form>
      <label>上传者:</label>
      <input type="text" v-model="uploader">
      <label>文件名:</label>
      <input type="text" v-model="filename">
    </form>
    <button @click="uploadFile">上传</button>
  </div>
</template>

其中，`handleFileUpload`是一个方法，用于获取选中的文件，同时将文件名赋值给`filename`变量。`uploader`变量则用于存储上传者的信息。

<script>
export default {
  data() {
    return {
      uploader: '',
      filename: ''
    }
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      this.filename = file.name;
    },
    uploadFile() {
      // 在这里实现文件上传的逻辑
    }
  }
}
</script>

接下来，您需要实现文件上传的逻辑。这里使用axios库来发送POST请求，将文件和其他信息一起上传到服务器。

<script>
import axios from 'axios';

export default {
  data() {
    return {
      uploader: '',
      filename: ''
    }
  },
  methods: {
    handleFileUpload(event) {
      const file = event.target.files[0];
      this.filename = file.name;
    },
    uploadFile() {
      const formData = new FormData();
      formData.append('file', event.target.files[0]);
      formData.append('uploader', this.uploader);
      formData.append('filename', this.filename);
      
      axios.post('/api/upload', formData)
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
}
</script>

在上面的例子中，我们将文件、上传者和文件名作为FormData对象的参数，通过POST请求将其发送到服务器的`/api/upload`接口中。在服务器端，您可以根据需要进行相应的处理。

希望这个例子对您有所帮助。如果您有其他问题，请随时提出。