Vue中的表单上传与文件预览

Vue中的表单上传与文件预览

在Web应用程序中,文件上传和预览是非常常见的功能。在Vue中,我们可以使用axiosFormData来实现表单上传,使用FileReader来实现文件预览。在本文中,我们将介绍如何在Vue中实现表单上传和文件预览功能。

Vue中的表单上传与文件预览_第1张图片

表单上传

表单上传是指将表单数据和文件上传到服务器的过程。在Vue中,我们可以使用axiosFormData来实现表单上传。

准备工作

在开始实现表单上传之前,我们需要先安装axiosqs库:

npm install axios qs --save

实现代码

下面是一个在Vue中实现表单上传的示例代码:

<template>
  <div>
    <form>
      <input type="text" name="name" v-model="name">
      <input type="file" name="file" ref="file" @change="fileSelected">
      <button type="button" @click="upload">上传button>
    form>
  div>
template>

<script>
import axios from "axios";
import qs from "qs";

export default {
  name: "UploadForm",
  data() {
    return {
      name: "",
      file: null
    };
  },
  methods: {
    fileSelected(event) {
      this.file = event.target.files[0];
    },
    upload() {
      const formData = new FormData();
      formData.append("name", this.name);
      formData.append("file", this.file);

      axios.post("/api/upload", formData, {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      }).then(response => {
        console.log(response.data);
      }).catch(error => {
        console.log(error);
      });
    }
  }
};
script>

在上面的代码中,我们首先定义了一个包含文本输入框、文件选择框和上传按钮的表单。然后,我们在data中定义了namefile属性,分别用来存储用户输入的文本和选中的文件。接着,我们实现了fileSelected方法,用来在用户选择文件后更新file属性的值。最后,我们实现了upload方法,用来将表单数据和文件上传到服务器。

upload方法中,我们首先创建一个FormData对象,并将namefile属性添加到该对象中。然后,我们使用axios库的post方法将表单数据和文件上传到服务器。需要注意的是,在使用FormData对象上传文件时,我们需要将Content-Type设置为multipart/form-data,以便服务器能够正确地解析表单数据和文件。

文件预览

文件预览是指在Web应用程序中预览文件内容的过程。在Vue中,我们可以使用FileReader来实现文件预览。

实现代码

下面是一个在Vue中实现文件预览的示例代码:

<template>
  <div>
    <input type="file" name="file" ref="file" @change="fileSelected">
    <div v-if="filePreview">
      <img v-if="isImage" :src="filePreview">
      <div v-else>{{ file.name }}div>
    div>
  div>
template>

<script>
export default {
  name: "FilePreview",
  data() {
    return {
      file: null,
      filePreview: null,
      isImage: false
    };
  },
  methods: {
    fileSelected(event) {
      this.file = event.target.files[0];
      this.previewFile();
    },
    previewFile() {
      const reader = new FileReader();
      reader.onload = event => {
        this.filePreview = event.target.result;
      };

      if (this.file.type.match("image.*")) {
        this.isImage = true;
        reader.readAsDataURL(this.file);
      } else {
        this.isImage = false;
        reader.readAsText(this.file);
      }
    }
  }
};
script>

在上面的代码中,我们首先定义了一个包含文件选择框和文件预览区域的组件。然后,我们在data中定义了filefilePreviewisImage属性,分别用来存储用户选择的文件、文件预览内容和用户选择的文件是否为图片。接着,我们实现了fileSelected方法,用来在用户选择文件后更新file属性的值,并调用previewFile方法来预览文件。最后,我们实现了previewFile方法,用来根据文件类型预览文件内容。

previewFile方法中,我们首先创建一个FileReader对象,并将其onload方法设置为一个回调函数。然后,我们使用if语句判断用户选择的文件是否为图片。如果是图片,我们将isImage属性设置为true,并调用readAsDataURL方法将图片文件读取为Base64编码的字符串。如果不是图片,我们将isImage属性设置为false,并调用readAsText方法将文件读取为文本字符串。

在HTML模板中,我们使用v-if指令判断filePreview属性是否存在,如果存在,我们使用v-if指令判断isImage属性的值,如果为true,我们将文件预览为图片,否则,我们将文件预览为文件名。

总结

在本文中,我们介绍了如何在Vue中实现表单上传和文件预览功能。对于表单上传,我们可以使用axiosFormData来实现。对于文件预览,我们可以使用FileReader来实现。这些功能在Web应用程序中非常常见,掌握它们对于开发Web应用程序非常重要。

你可能感兴趣的:(Vue,教程,vue.js,javascript,前端)