在Vue3中，可以使用<input type="file">标签来实现上传文件的功能，同时可以通过<div>标签来实现拖拽上传的功能。

首先，在template中定义一个包含<input>和<div>标签的组件：

<template><div class="dropzone" @dragover.prevent @drop="handleDrop"><input type="file" @change="handleFileUpload"></div><div v-if="uploadedFile"><p>上传成功！文件名：{{ uploadedFile.name }}</p><img :src="uploadedFileUrl" /></div>
</template>

然后，在script中定义组件的逻辑：

<script>
export default {data() {return {uploadedFile: null,uploadedFileUrl: null,};},methods: {handleFileUpload(event) {const file = event.target.files[0];this.uploadFile(file);},handleDrop(event) {event.preventDefault();const file = event.dataTransfer.files[0];this.uploadFile(file);},async uploadFile(file) {const formData = new FormData();formData.append('file', file);// 发送上传请求，成功后将uploadedFile和uploadedFileUrl赋值},},
};
</script>

在style中添加一些样式：

<style>
.dropzone {border: 2px dashed gray;padding: 20px;text-align: center;
}
</style>

这样就可以通过拖拽或点击上传文件，并在上传成功后展示上传的图片了。

---

在Vue3中，我们可以使用原生标签制作一个拖拽和点击上传组件，以下是实现步骤：

1. 在组件中定义一个data属性，用于存储上传文件的信息：

<template><div><input type="file" ref="fileInput" @change="handleFileChange"><divclass="drop-zone"@dragover.prevent@drop.prevent="handleDrop"><p>拖拽文件到此处或点击上传</p></div><div v-if="fileUrl"><img :src="fileUrl" alt=""></div></div>
</template><script>
export default {data() {return {file: null,fileUrl: null}},methods: {handleFileChange(event) {this.file = event.target.files[0]this.uploadFile()},handleDrop(event) {this.file = event.dataTransfer.files[0]this.uploadFile()},async uploadFile() {// 文件上传逻辑const response = await this.$axios.post('/upload', this.file)this.fileUrl = response.data.url}}
}
</script>

定义一个input标签，用于点击上传文件：

<input type="file" ref="fileInput" @change="handleFileChange">

定义一个div标签作为拖拽上传区域：

<divclass="drop-zone"@dragover.prevent@drop.prevent="handleDrop"><p>拖拽文件到此处或点击上传</p>
</div>

监听input和拖拽事件，获取文件信息并调用uploadFile方法上传文件：

methods: {handleFileChange(event) {this.file = event.target.files[0]this.uploadFile()},handleDrop(event) {this.file = event.dataTransfer.files[0]this.uploadFile()},async uploadFile() {// 文件上传逻辑const response = await this.$axios.post('/upload', this.file)this.fileUrl = response.data.url}
}

在上传成功后展示文件：

<div v-if="fileUrl"><img :src="fileUrl" alt="">
</div>

完整代码如下：

<template><div><input type="file" ref="fileInput" @change="handleFileChange"><divclass="drop-zone"@dragover.prevent@drop.prevent="handleDrop"><p>拖拽文件到此处或点击上传</p></div><div v-if="fileUrl"><img :src="fileUrl" alt=""></div></div>
</template><script>
export default {data() {return {file: null,fileUrl: null}},methods: {handleFileChange(event) {this.file = event.target.files[0]this.uploadFile()},handleDrop(event) {this.file = event.dataTransfer.files[0]this.uploadFile()},async uploadFile() {// 文件上传逻辑const response = await this.$axios.post('/upload', this.file)this.fileUrl = response.data.url}}
}
</script><style>
.drop-zone {border: 2px dashed gray;height: 200px;display: flex;align-items: center;justify-content: center;
}
</style>

---

点击或拖拽上传图片 

<template><div><input type="file" ref="fileInput" style="display: none" @change="handleFileUpload"><div class="image-container"><img :src="imageUrl" @click="handleImageClick" @dragover="handleDragOver" @drop="handleDrop"><p v-if="!imageUrl">点击或拖拽上传图片</p></div></div>
</template><script>
import { ref } from 'vue';export default {data() {return {imageUrl: null,};},methods: {handleImageClick() {this.$refs.fileInput.click();},handleDragOver(event) {event.preventDefault();},handleDrop(event) {event.preventDefault();const file = event.dataTransfer.files[0];this.uploadImage(file);},handleFileUpload(event) {const file = event.target.files[0];this.uploadImage(file);},async uploadImage(file) {// 在这里执行上传图片的逻辑// 可以使用axios或其他库发送请求到服务器// 处理上传成功后的结果，比如更新图片URLthis.imageUrl = await this.uploadToServer(file);},async uploadToServer(file) {// 上传文件到服务器的逻辑// 返回上传成功后的图片URL},},
};
</script>