vue是一款流行的javascript框架，它被广泛应用于前端开发当中。在vue中，文件上传是一个很常见的需求，本文将介绍vue上传文件的写法。
一、安装依赖
vue文件上传需要使用axios和vue-router这两个依赖，所以我们需要安装这两个依赖：
npm install axios vue-router --save
二、html代码
下面是vue上传文件的html代码：
<template>  <div>    <input type="file" @change="onfilechange" />    <button @click="upload">上传</button>  </div></template>
其中，onfilechange是选择文件时触发的事件，upload是点击上传按钮时触发的事件。
三、javascript代码
接下来，我们需要编写vue的javascript代码：
<script>  import axios from 'axios'  import router from 'vue-router'    export default {    name: 'file-upload',    data () {      return {        file: null,        errormsg: ''      }    },    methods: {      onfilechange (event) {        this.file = event.target.files[0];      },      upload () {        let formdata = new formdata();        formdata.append('file', this.file);                let token = localstorage.getitem('token');        if (token) {          axios.post('/api/upload', formdata, {            headers: {              'authorization': 'bearer ' + token            }          })          .then(response => {            router.push('/success');          })          .catch(error => {            this.errormsg = '上传文件失败';          })        }      }    }  }</script>
其中，我们首先import了axios和vue-router依赖，然后定义了一个data对象，包含了file和errormsg两个属性，分别表示文件和错误信息。
接着，我们定义了两个方法：onfilechange和upload。onfilechange方法会在选择文件时触发，将选中的文件保存在data对象的file属性中。upload方法会在上传按钮被点击时触发，首先创建一个formdata对象，然后通过axios.post方法向服务器上传文件，上传成功后使用vue-router将页面跳转到成功页面，在上传过程中发生错误，errormsg属性被赋值为上传文件失败。
四、总结
vue上传文件的写法相对较简单，只需要了解axios和vue-router两个依赖的用法，就能够实现文件上传功能。希望本文的介绍能够对大家有所帮助。
以上就是实例讲解vue怎么实现上传文件功能的详细内容。