广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

Vue作为目前前端开发最流行的框架之一，其实现文件上传功能的方式也十分简单优雅。本文将为大家介绍在Vue中如何实现文件上传功能。

在 HTML 文件中添加如下代码，创建上传表单：

<template>  <div>    <form ref="uploadForm"           enctype="multipart/form-data"           class="upload-form"           @submit.prevent="submitFile">      <input type="file"              name="file"              id="file"              class="input-file"             ref="file"             @change="handleFileChange" />      <label for="file" class="btn">选择文件</label>      <!-- 进度条展示 -->      <p v-if="showProgress">上传进度：{{ percent }} %</p>      <button type="submit"               class="upload-btn"               :disabled="!selectedFile">上传</button>    </form>  </div></template>

如上代码中，使用 form 和 input 标签来创建上传表单。上传表单中的 name 属性指定表单中文件的字段名。enctype 属性表示要上传的文件的类型，这里使用了 multipart/form-data 类型。

在 label 标签中通过 @click.prevent 事件来触发 input 标签的点击事件，从而弹出文件选择框。这里的 @change 事件可以监听到文件选择并且调用 handleFileChange 方法来更新表单中的文件名称。

在 JavaScript 文件中，我们需要通过 Vue.js 的自定义组件以及 axios 库来实现文件上传。

<script>import axios from 'axios';export default {  data () {    return {      selectedFile: null,  // 选中的文件      showProgress: false,  // 是否展示上传进度条      percent: 0,    // 上传进度百分比    }  },  methods: {    handleFileChange (event) {      this.selectedFile = event.target.files[0];    },    submitFile () {      if (!this.selectedFile) return;      // 新建 from 对象      const formData = new FormData();      formData.append('file', this.selectedFile, this.selectedFile.name);      this.showProgress = true;      const config = {        headers: {          'Content-Type': 'multipart/form-data'        },        onUploadProgress: progressEvent => {          // 计算上传进度百分比          this.percent = Math.round((progressEvent.loaded * 100) / progressEvent.total);        },      };      axios.post('/api/upload', formData, config)        .then((response) => {          console.log(response);          this.showProgress = false;  // 移除 progress 条        })        .catch((error) => {          console.log(error);          this.showProgress = false;        });    },  },};</script>

在 methods 中定义 handleFileChange()、submitFile() 方法处理文件选择和上传：

在以上代码中，我们使用了 axios 库完成文件上传操作。在前端工程的 package.json 文件中添加 axios 的依赖：

"axios": "^0.19.2"

通过 import axios from 'axios'; 引入并使用。在后台 API 中，使用 Multer 库来处理文件上传。Multer 是一个处理文件上传的 Node.js 库，Multer 可以处理文件并跟随表单一起发送。

const express = require('express');const multer = require('multer');const fs = require('fs');const app = express();const upload = multer({ dest: 'uploads/' });app.post('/api/upload', upload.single('file'), (req, res) => {  const file = req.file;  if (!file) {    const error = new Error('Please upload a file');    error.httpStatusCode = 400;    return next(error);  }  // 文件重命名  const oldPath = file.path;  const newPath = 'uploads/' + file.originalname;  fs.rename(oldPath, newPath, (err) => {    if (err) {      console.error(err);    }  });  res.send('File uploaded successfully');});const port = process.env.PORT || 3000;app.listen(port, () => {  console.log(`Server listening on port ${port}`);});

通过 Multer 的 single 方法指定了上传文件的字段名，同时 Multer 还提供了其他方法进行多文件上传和文件类型限制等操作。我们在上传完成后会把文件从初始路径移动到 uploads 目录中，文件重命名操作可以使名称唯一避免不同文件名上传覆盖。

在以上代码中，我们使用了 express 库创建 Node.js 服务器应用。在后台工程中 package.json 文件中添加以下依赖：

"express": "^4.17.1","multer": "^1.4.2"

使用 import / require 语句引入并使用相应模块即可。

在文件上传过程中，可能会出现异常状况，比如文件大小超限、文件类型不允许、网络超时和服务端错误等多种因素，我们需要编写客户端和服务端相应的异常状况处理程序。

在客户端部分，由于我们使用了 axios 库，可以直接使用 then 和 catch 方法处理上传请求返回的 Promise 对象，分别处理上传成功和失败时的操作。在本文所提供的代码中，我们使用了 Promise.catch() 来处理流程执行过程中的异常。在服务器端，不同的异常情况需要根据实际情况进行不同的处理。

在本文中，我们介绍了如何使用 Vue.js 完成文件上传操作，包括前端文件选择和上传过程中的进度条动态展示，以及后台 APIs 的编写，同时对上传过程中可能出现的异常情况进行了处理。

文件上传功能是许多 Web 应用程序中不可或缺的一个功能，在 Vue.js 中使用 axios 库和 Multer 库可实现简单而优雅的上传流程。

以上就是Vue 中如何实现文件上传功能？的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~