vue3实现上传功能

**Vue3 实现上传功能**

在 Vue3 中，实现上传功能可以通过使用 `axios` 库或 `fetch` API 来发送 HTTP 请求。以下是使用 `axios` 库的步骤：

### 步骤1：安装 axios 库首先，我们需要安装 `axios` 库：

bashnpm install axios

或者，如果你使用 yarn：

bashyarn add axios

### 步骤2：创建上传组件接下来，我们需要创建一个上传组件。我们可以使用 Vue3 的 Composition API 来实现这个功能。

首先，我们需要定义一个 `useUpload` 函数，它将包含上传逻辑：

javascript// useUpload.jsimport { ref } from 'vue';
import axios from 'axios';

export function useUpload() {
 const file = ref(null);
 const uploading = ref(false);

 async function handleUpload() {
 if (!file.value) return;

 try {
 uploading.value = true;
 const formData = new FormData();
 formData.append('file', file.value);

 const response = await axios.post('/api/upload', formData, {
 headers: { 'Content-Type': 'multipart/form-data' },
 });

 console.log(response.data);
 } catch (error) {
 console.error(error);
 } finally {
 uploading.value = false;
 }
 }

 return { file, uploading, handleUpload };
}

在这个函数中，我们定义了一个 `file` 变量来存储上传的文件，一个 `uploading` 变量来表示是否正在上传中，以及一个 `handleUpload` 函数来处理上传逻辑。

### 步骤3：使用 useUpload 函数接下来，我们需要在我们的 Vue 组件中使用这个 `useUpload` 函数。我们可以通过以下方式实现：

javascript// Upload.vue<template>
 <div>
 <input type="file" @change="handleFileChange" />
 <button @click="handleUpload">上传</button>
 <p v-if="uploading">正在上传...</p>
 </div>
</template>

<script>
import { ref } from 'vue';
import useUpload from './useUpload';

export default {
 setup() {
 const { file, uploading, handleUpload } = useUpload();

 function handleFileChange(event) {
 file.value = event.target.files[0];
 }

 return { file, uploading, handleUpload, handleFileChange };
 },
};
</script>

在这个组件中，我们使用 `useUpload` 函数来获取上传逻辑。我们定义了一个 `handleFileChange` 函数来处理文件选择事件，一个 `handleUpload` 函数来处理上传按钮点击事件。

### 步骤4：实现 API最后，我们需要在后端实现一个 API 来处理上传请求。我们可以使用 Node.js 和 Express.js 来实现这个功能。

首先，我们需要安装 Express.js 库：

bashnpm install express

或者，如果你使用 yarn：

bashyarn add express

然后，我们可以创建一个 Express.js 应用程序来处理上传请求：

javascript// server.jsconst express = require('express');
const multer = require('multer');

const app = express();

const upload = multer({ dest: './uploads/' });

app.post('/api/upload', upload.single('file'), (req, res) => {
 console.log(req.file);
 res.send('上传成功!');
});

app.listen(3000, () => {
 console.log('Server listening on port3000');
});

在这个例子中，我们使用 Multer 库来处理文件上传。我们定义了一个 `upload` 函数来处理文件上传，一个 `/api/upload` 路由来处理上传请求。

以上就是 Vue3 实现上传功能的步骤。通过这些步骤，你可以轻松地在你的应用程序中实现上传功能。