如何在Vue表单处理中实现表单的图片上传与预览

1. 简介

在Vue表单处理中，实现图片上传与预览是非常实用的功能。用户可以在上传表单中选择图片，然后预览上传的图片以确保正确性。这篇文章将介绍如何在Vue表单中使用Vuelidate和Vue-Upload-Component这两个库实现图片上传和预览的功能。

2. 安装Vuelidate和Vue-Upload-Component

首先，我们需要安装Vuelidate和Vue-Upload-Component这两个库。在终端内运行以下指令进行安装:

// 安装Vuelidate

npm i --save vuelidate
// 安装Vue-Upload-Component
npm i --save vue-upload-component

3. 实现图片上传

下面，我们来实现图片上传的功能。这里我们采用Vue-Upload-Component库来进行上传。在Vue组件内，首先要引入Vue-Upload-Component:

import VueUploadComponent from 'vue-upload-component'

export default {
  components: {
    VueUploadComponent
  },
  data() {
    return {
      // ...
    }
  }
}

然后，在模板中添加组件调用代码:

<template>

  <div>
    <vue-upload-component
      ref="fileUpload"
      :url="uploadUrl"
      @upload-success="uploadSuccess">
        <button slot="button" class="button is-primary">
          <i class="fas fa-upload"></i>
          <span>Upload</span>
        </button>
    </vue-upload-component>
  </div>
</template>

这里，我们定义了一个叫做`fileUpload`的ref。我们将`url`属性设置为上传到后端的URL，并且在上传成功时触发`uploadSuccess`事件。

接着，我们需要在组件的`data()`方法内定义一个`uploadUrl`属性和一个`uploadSuccess`事件处理方法:

import VueUploadComponent from 'vue-upload-component'

export default {
  components: {
    VueUploadComponent
  },
  data() {
    return {
      uploadUrl: '/api/upload',
      uploadedFile: null
    }
  },
  methods: {
    uploadSuccess(file, response) {
      this.uploadedFile = response.file
    }
  }
}

这里，我们将`uploadUrl`设置为我们的上传URL。在`uploadSuccess`方法内，我们将上传后的文件赋值给`uploadedFile`属性。

4. 实现图片预览

现在，我们已经可以上传图片了。下一步，我们需要实现图片预览的功能。在这里，我们将使用HTML5的`FileReader`对象来实现。在组件内，我们可以添加一个`preview`方法。该方法会读取上传的文件并向用户展示预览图像:

import VueUploadComponent from 'vue-upload-component'

export default {
  components: {
    VueUploadComponent
  },
  data() {
    return {
      uploadUrl: '/api/upload',
      uploadedFile: null
    }
  },
  methods: {
    uploadSuccess(file, response) {
      this.uploadedFile = response.file
      this.preview()
    },
    preview() {
      if (!this.uploadedFile) return
      
      const reader = new FileReader()
      
      reader.onload = e => {
        this.previewImage = e.target.result
      }
      
      reader.readAsDataURL(this.uploadedFile)
    }
  }
}

上述代码中，我们首先检查`uploadedFile`是否有被赋值。如果没有，我们将直接返回，因为这时没有可以预览的文件。接着，我们创建了一个新的`FileReader`对象。在创建对象后，我们向对象的`onload`事件添加了一个监听器。该事件表示预览已完成。在事件监听器中，我们使用`e.target.result`获取了预览文件的URL，并将其赋值给`previewImage`属性。最后，我们调用`readAsDataURL`方法以启动读取过程。

5. 实现表单验证

最后，我们需要对上传的文件进行验证。在这里，我们将使用Vuelidate库进行表单验证。

首先，让我们在Vue组件中引入Vuelidate:

import { required } from 'vuelidate/lib/validators'

export default {
  data() {
    return {
      // ...
    }
  },
  validations: {
    uploadedFile: {
      required
    }
  },
  // ...
}

在Vuelidate中，我们可以使用各种验证器对表单进行验证。在这里，我们引入了`required`验证器来保证用户已经上传了文件。

接着，在模板中添加提交按钮:

<template>

  <div>
    <vue-upload-component
      ref="fileUpload"
      :url="uploadUrl"
      @upload-success="uploadSuccess">
      <button slot="button" class="button is-primary">
        <i class="fas fa-upload"></i>
        <span>Upload</span>
      </button>
    </vue-upload-component>
    
    <div v-if="$v.uploadedFile.$error">
      <strong>{{$v.uploadedFile.$error}}</strong>
    </div>
    
    <div v-else-if="previewImage">
      <img :src="previewImage" alt="预览图像">
    </div>
    
    <button class="button is-info"
      :disabled="$v.$invalid || !previewImage"
      @click="submitForm">
      提交
    </button>
  </div>
</template>

在上述代码中，我们使用了`v-if`、`v-else-if`和`v-else`指令来显示上传表单的三种状态。

第一种状态下，我们检查了`$v.uploadedFile.$error`属性是否存在。如果存在，我们将向用户展示错误消息。在这里，我们使用了`$error`属性，该属性是Vuelidate提供的错误消息。我们在模板中使用了`{{ $v.uploadedFile.$error }}`语法来表示`$error`值。

第二种状态下，我们检查`previewImage`属性是否存在。如果存在，我们将展示用户上传的图片。

最后，我们在模板中添加了一个提交按钮。在该按钮中，我们使用了Vuelidate的`$invalid`属性来检查表单是否无效。如果无效，则禁用提交按钮。

6. 完整代码

下面是实现上传和预览功能的完整代码：

import VueUploadComponent from 'vue-upload-component'

import { required } from 'vuelidate/lib/validators'
export default {
  components: {
    VueUploadComponent
  },
  data() {
    return {
      uploadUrl: '/api/upload',
      uploadedFile: null,
      previewImage: null
    }
  },
  validations: {
    uploadedFile: {
      required
    }
  },
  methods: {
    uploadSuccess(file, response) {
      this.uploadedFile = response.file
      this.preview()
    },
    preview() {
      if (!this.uploadedFile) return
      
      const reader = new FileReader()
      
      reader.onload = e => {
        this.previewImage = e.target.result
      }
      
      reader.readAsDataURL(this.uploadedFile)
    },
    submitForm() {
      if (this.$v.$invalid || !this.previewImage) return
      
      this.$emit('form-submit', {
        file: this.uploadedFile,
        previewUrl: this.previewImage
      })
    }
  }
}

在上面的代码中，我们还添加了一个`submitForm`方法，该方法在提交表单时被调用。在这里，我们使用`$emit`方法向组件的父组件发送一个事件。在该事件中，我们将上传的文件和预览图像作为数据发送给父组件。

7. 总结

在Vue表单处理中，实现图片上传和预览非常实用。在本文中，我们介绍了如何使用Vuelidate和Vue-Upload-Component库来实现这种功能。我们通过使用Vuelidate库进行表单验证，并使用Vue-Upload-Component库进行上传，然后使用HTML5的FileReader对象来实现预览。最终，我们将这些功能整合到一个Vue组件内，并使用了一些Vue指令和方法来向用户展示上传和预览的图片。