vue3中使用原始标签制作一个拖拽和点击上传组件上传成功后展示

 在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">
    <div
      class="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标签作为拖拽上传区域：

<div
  class="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">
    <div
      class="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或其他库发送请求到服务器
      // 处理上传成功后的结果，比如更新图片URL
      this.imageUrl = await this.uploadToServer(file);
    },
    async uploadToServer(file) {
      // 上传文件到服务器的逻辑
      // 返回上传成功后的图片URL
    },
  },
};
</script>