实例讲解Vue怎么实现上传文件功能-前端问答-PHP中文网

实例讲解Vue怎么实现上传文件功能

PHPz

发布： 2023-04-12 09:19:55

原创

3065人浏览过

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

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

接下来，我们需要编写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怎么实现上传文件功能的详细内容，更多请关注php中文网其它相关文章！