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

 所属分类:web前端开发

 浏览:181次-  评论: 0次-  更新时间:2023-06-28
描述:更多教程资料进入php教程获得。 Vue是一种基于MVVM模式的前端框架,它通过数据绑定和组件化来简化Web开发。在Vue的开发过程中,涉及到图片...
更多教程资料进入php教程获得。

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">
      <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>

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

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

积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!