vue2图片上传预览

Vue2中实现图片上传并预览，通常会结合Element UI等前端组件库以及File API。以下是一个简单的步骤：

1. 引入所需的库和组件：首先需要引入Vue和Element UI的`el-upload`组件，用于文件上传，以及`img`元素用于显示图片。

<template>
  <el-upload
    ref="upload"
    :action="uploadUrl"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-upload="beforeUpload"
  >
    <el-button>点击选择图片</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png/jpeg文件，且不超过500KB</div>
  </el-upload>
  <img v-if="previewImage" :src="previewImage" alt="图片预览">
</template>

2. 定义数据属性和方法：设置`uploadUrl`、`previewImage`等变量，并编写处理图片预览、上传前检查和删除的方法。

export default {
  data() {
    return {
      uploadUrl: '',
      previewImage: '',
    };
  },
  methods: {
    handlePreview(file) {
      this.previewImage = URL.createObjectURL(file);
    },
    handleRemove(file, response) {
      console.log('Delete file', file, response);
      this.previewImage = '';
    },
    beforeUpload(file) {
      const isLt500Kb = file.size / 1024 < 500; // 检查是否小于500KB
      if (!isLt500Kb) {
        alert('文件大小超过限制');
        return false;
      }
      const isJpgOrPng = (file.type === 'image/jpeg' || file.type === 'image/png') && !file.name.includes('.gif'); // 检查是否是jpg或png
      return isJpgOrPng;
    },
  },
};