vue作为目前前端开发最流行的框架之一，其实现文件上传功能的方式也十分简单优雅。本文将为大家介绍在vue中如何实现文件上传功能。
html 部分在 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 部分在 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() 方法处理文件选择和上传：
handlefilechange 方法中监听文件选择事件并将选中的文件存储起来。submitfile 方法中判断选中的文件是否存在，不存在则直接返回。使用 new formdata() 构造一个表单，并把选中的文件通过 append 方法追加到表单中，注意第三位参数为文件名称。axios.post 通过字符串参数指定上传文件的 api，上传请求的数据正为该 formdata 对象，headers 中的 content-type 属性指定了数据类型，这里使用 multipart/form-data 类型，同时通过 onuploadprogress 事件监听上传进度，以便实现进度条动态展示。在以上代码中，我们使用了 axios 库完成文件上传操作。在前端工程的 package.json 文件中添加 axios 的依赖：
"axios": "^0.19.2"
通过 import axios from 'axios'; 引入并使用。在后台 api 中，使用 multer 库来处理文件上传。multer 是一个处理文件上传的 node.js 库，multer 可以处理文件并跟随表单一起发送。
后台 api 部分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 中如何实现文件上传功能？的详细内容。