How to implement image upload and preview functions in Vue documents

Vue is a front-end framework based on the MVVM pattern, which simplifies web development through data binding and componentization. In the development process of Vue, the requirements related to image uploading and previewing are relatively common. This article will introduce the implementation methods of related functions in Vue documents about image upload and preview.

First of all, you need to introduce the axios and element-ui libraries into the Vue component, because these two libraries are needed when uploading images.

import axios from 'axios'
import { Message } from 'element-ui'

Next, define a function to upload images:

uploadImage(file) {
  let formData = new FormData()
  formData.append('file', file)
  return axios.post('/upload', formData)
    .then(res => {
      if (res.data.code === 0) {
        return Promise.resolve(res.data.data)
      } else {
        return Promise.reject(res.data.msg)
      }
    }).catch(err => {
      Message.error('图片上传失败！')
      return Promise.reject(err)
    })
}

In this function, upload the file to the server through the post method of axios, and return the data as a Promise after the upload is successful. . If the upload fails, an error message is displayed.

The following is the function code for previewing images:

previewImage(file, cb) {
  if (!file) {
    return
  }
  if (typeof FileReader === 'undefined') {
    Message.warning('您的浏览器不支持图片预览')
    return
  }
  let reader = new FileReader()
  reader.onload = function(e) {
    cb(e.target.result)
  }
  reader.readAsDataURL(file)
}

In this function, the image preview function is implemented through the FileReader object. When reading the file, the URL of the preview image is returned as a parameter through the callback function cb.

Finally, use these two functions in the Vue component to implement the image upload and preview functions:

<template>
  <div class="upload">
    <el-upload
      class="avatar-uploader"
      :action="serverUrl"
      :show-file-list="false"
      :on-success="handleSuccess"
      :before-upload="beforeUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        imageUrl: ''
      }
    },
    methods: {
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg'
        const isPNG = file.type === 'image/png'
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG && !isPNG) {
          this.$message.error('上传头像图片只能是 JPG/PNG 格式!')
          return false
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
          return false
        }
        this.previewImage(file, (url) => {
          this.imageUrl = url
        })
      },
      handleSuccess(response) {
        this.$emit('update:avatar_url', response.fileUrl)
      }
    }
  }
</script>

In this example, we use the Upload component of element-ui to implement the image Upload function, and use the beforeUpload function to verify whether the uploaded file meets the requirements (must be in JPG/PNG format and cannot exceed 2MB in size). If the verification passes, the preview image function is called to preview the file. After the upload is successful, the returned URL address is passed out through the event for use by other components.

To sum up, by using the above functions and components, the image upload and preview functions in the Vue document can be more easily implemented. Of course, in actual applications, corresponding adjustments and optimizations need to be made according to specific business needs.

The above is the detailed content of How to implement image upload and preview functions in Vue documents. For more information, please follow other related articles on the PHP Chinese website!