vue中使用input[type=”file”]实现文件上传功能

下面是关于vue中使用input[type="file"]实现文件上传功能的攻略：

1. HTML部分

首先，在HTML中需要使用<input>标签，并将其type属性设置为file，这样用户点击该元素会弹出选择文件的对话框，代码如下：

<template>
  <div>
    <input type="file" @change="handleFileChange">
  </div>
</template>

其中，我们在<input>标签中添加了一个名为@change的事件监听器，它会在用户选择了文件后触发相应的处理程序。

2. JS部分

接着，在JavaScript中需要编写一个处理函数，它会将选择的文件上传到服务器。上传的方法有很多种，这里介绍两种常用的方式。

2.1 使用FormData上传文件

在处理函数中，可以使用FormData对象将文件上传到服务器。FormData对象可以很方便地构造表单数据，并以multipart/form-data格式将它们发送到服务器。代码示例如下：

<script>
export default {
  data() {
    return {
      file: null
    }
  },
  methods: {
    handleFileChange(e) {
      this.file = e.target.files[0];
      const formData = new FormData();
      formData.append('file', this.file);
      axios.post('/upload', formData).then(response => {
        console.log(response.data);
      }).catch(error => {
        console.log(error);
      });
    }
  }
}
</script>

在上面代码中，我们首先定义了一个名为handleFileChange的方法，在这个方法中，我们使用FormData对象将用户选择的文件上传到/upload接口。上传成功后，服务器将返回一个响应，可以在then回调函数中处理它。如果上传过程中出现了错误，可以在catch回调函数中处理它。

2.2 将文件转换成Base64编码并上传

另外一种方式是将文件转换成Base64编码并在请求中携带。这种方法的优点是能够在不使用FormData对象的情况下将文件上传到服务器，代码示例如下：

<script>
export default {
  data() {
    return {
      file: null
    }
  },
  methods: {
    handleFileChange(e) {
      this.file = e.target.files[0];
      const reader = new FileReader();
      reader.readAsDataURL(this.file);
      reader.onload = () => {
        axios.post('/upload', {
          data: reader.result.split(',')[1],
          fileName: this.file.name
        }).then(response => {
          console.log(response.data);
        }).catch(error => {
          console.log(error);
        });
      };
    }
  }
}
</script>

在上面代码中，我们定义了一个名为handleFileChange的方法，它会在用户选择文件后执行。我们首先创建了一个FileReader对象，用它将文件转换成Base64编码，并将其携带在请求中上传。

总结

上述两种方式都是比较常用的文件上传方法。使用FormData上传文件能够很方便地构造表单数据，并以multipart/form-data格式将它们发送到服务器；而转换成Base64编码并上传则可以避免使用FormData对象，使代码更加简洁。