基于Vue3实现图片拖拽上传功能

npm install -g @vue/cli

vue create drag-and-drop-upload

cd drag-and-drop-upload

npm install axios

<template>
  <div
    class="upload-area"
    @dragover.prevent
    @drop.prevent="handleDrop"
    :class="{ 'is-dragover': isDragOver }"
    @dragenter="isDragOver = true"
    @dragleave="isDragOver = false"
  >
    <p v-if="!file">将图片拖放到此处，或点击选择文件</p>
    <p v-if="file">{{ file.name }}</p>
    <input type="file" @change="handleFileChange" accept="image/*" style="display: none;" ref="fileInput" />
    <button @click="selectFile">选择文件</button>
    <button @click="uploadFile" :disabled="!file">上传</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const file = ref(null);
const isDragOver = ref(false);
const fileInput = ref(null);

const handleFileChange = (event) => {
  const selectedFile = event.target.files[0];
  if (selectedFile && selectedFile.type.startsWith('image/')) {
    file.value = selectedFile;
  } else    alert('请选择一个有效的图片文件');
  }
};

const handleDrop = (event) => {
  const droppedFile = event.dataTransfer.files[0];
  if (droppedFile && droppedFile.type.startsWith('image/')) {
    file.value = droppedFile;
  } else {
    alert('您只能上传图片文件');
  }
  isDragOver.value = false; // Reset drag over status
};

const selectFile = () => {
  fileInput.value.click();
};

const uploadFile = async () => {
  if (!file.value) return;

  const formData = new FormData();
  formData.append('file', file.value);

  try {
    const response = await axios.post('https://your-upload-url.com/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });
    alert('上传成功：' + response.data);
  } catch (error) {
    alert('上传失败：' + error.message);
  }
};
</script>

<style scoped>
.upload-area {
  border: 2px dashed #ccc;
  border-radius: 10px;
  width: 300px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition: background-color 0.3s;
}

.upload-area.is-dragover {
  background-color: #f0f8ff;
}

button {
  margin-top: 10px;
}
</style>

<template>
  <div id="app">
    <h1>图片拖拽上传示例</h1>
    <DragAndDropUpload />
  </div>
</template>

<script setup>
import DragAndDropUpload from './components/DragAndDropUpload.vue';
</script>

<style>
#app {
  text-align: center;
  margin-top: 50px;
}
</style>