Vue文档中的图片上传和预览函数实现方法-Vue.js-PHP中文网

Vue文档中的图片上传和预览函数实现方法

WBOY

发布： 2023-06-20 09:22:08

原创

1683人浏览过

vue是一种基于mvvm模式的前端框架，它通过数据绑定和组件化来简化web开发。在vue的开发过程中，涉及到图片上传和预览的需求是比较常见的。本文将介绍vue文档中关于图片上传和预览的相关函数实现方法。

首先，需要在Vue组件中引入axios和element-ui库，因为在上传图片时需要用到这两个库。

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

登录后复制

接下来，定义一个函数来上传图片：

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)
    })
}

登录后复制

在这个函数中，通过axios的post方法将文件上传到服务器，并在上传成功后将数据作为Promise返回。如果上传失败，则会显示一条错误消息。

下面是预览图片的函数代码：

立即学习“前端免费学习笔记（深入）”；

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)
}

登录后复制

在这个函数中，通过FileReader对象来实现图片预览的功能。在读取文件时，通过回调函数cb将预览图像的URL作为参数返回。

最后，在Vue组件中使用这两个函数来实现图片上传和预览的功能：

<template>
  <div class="upload">
    <el-upload
      class="avatar-uploader"
      :action="serverUrl"
      :show-file-list="false"
      :on-success="handleSuccess"
      :before-upload="beforeUpload">
      @@##@@
      <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>

登录后复制

在这个示例中，我们使用了element-ui的Upload组件来实现图片上传的功能，并使用beforeUpload函数来验证上传的文件是否符合要求（必须是JPG/PNG格式且大小不能超过2MB），如果验证通过，则调用预览图片函数来预览该文件。在上传成功后，将返回的URL地址通过事件传递出去供其他组件使用。

综上所述，通过使用以上的函数和组件，可以较为方便地实现Vue文档中关于图片上传和预览的功能。当然，在实际应用中，还需要根据具体业务需求来进行相应的调整和优化。

以上就是Vue文档中的图片上传和预览函数实现方法的详细内容，更多请关注php中文网其它相关文章！