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

引言

前端开发中，用户体验是至关重要的，图像上传是许多 web 应用中经常需要的功能之一。为了提升用户的交互体验，拖拽上传功能可以减少用户的操作步骤，让用户能够更加直观地上传文件。本文将介绍如何使用 vue 3 和其新的 composition api (setup 语法糖) 实现一个简单的图片拖拽上传功能。

项目准备

首先，你需要安装 vue cli。确保你已经安装了 node.js 和 npm，然后可以使用以下命令安装 vue cli：

npm install -g @vue/cli

接下来，通过命令创建一个新的 vue 项目：

vue create drag-and-drop-upload

选择想要的配置（推荐选择默认配置），然后进入项目目录：

cd drag-and-drop-upload

现在，我们需要安装额外的库，用于处理文件上传。我们可以使用 axios 来发送 http 请求：

npm install axios

创建拖拽组件

在 src/components 目录下创建一个名为 draganddropupload.vue 的组件文件。接下来，我们将实现拖拽上传的逻辑。

<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>

代码解析

模板部分

upload-area 类：这是一个用于展示上传区域的 div，包括了拖拽事件的监听和相关提示。
@dragover.prevent 和 @drop.prevent：这两个指令阻止默认的浏览器行为，确保文件可以被拖拽到区域内。
v-if 用于根据用户操作更新界面信息。

逻辑部分

状态管理：使用 ref 创建一个响应式的 file 和一个 isdragover 用于管理拖拽状态。
文件选择和拖拽处理：
- handlefilechange：处理文件选择（输入框选择的文件）。
- handledrop：处理拖拽到上传区域的文件。
文件上传：
- 上传文件会使用 axios 发送一条 post 请求，将选中的图片上传到指定的服务器地址。

使用组件

在 app.vue 中使用这个组件：

<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>