jeecg-vue如何实现将上传的图片和图片信息显示在页面上而不上传到服务器

在jeecg-vue中，如果需要将上传的图片和图片信息显示在页面上而不上传到服务器，可使用如下步骤实现。

首先，需要在页面上添加一个用于显示上传的图片的元素，比如一个<img>标签或者<div>容器。

然后，通过浏览器的文件选择框选择要上传的图片，并将选择的图片对象保存在一个变量中，例如使用Vue中的data属性保存：

data() {
  return {
    imageFile: null, // 保存图片对象的变量
    imageUrl: '' // 保存图片的base64编码的字符串
  }
}

接下来，使用FileReader API读取图片文件，并将读取到的图片转换为base64编码的字符串：

// 添加一个input[type="file"]元素，并监听change事件
<input type="file" @change="handleImageUpload">

methods: {
  handleImageUpload(e) {
    // 获取文件对象
    const file = e.target.files[0]
    // 创建FileReader对象
    const reader = new FileReader()
    // 读取图片文件
    reader.readAsDataURL(file)
    // 监听读取完成事件
    reader.onload = () => {
      // 将读取到的图片base64编码的字符串保存在imageUrl中
      this.imageUrl = reader.result
      // 保存图片对象
      this.imageFile = file
    }
  }
}

最后，在页面上显示上传的图片和图片信息：

<!-- 显示上传的图片 -->
<img :src="imageUrl" alt="uploaded image">

<!-- 显示图片信息 -->
<p>图片名称：{{ imageFile.name }}</p>
<p>图片大小：{{ imageFile.size }}</p>
<p>图片类型：{{ imageFile.type }}</p>

通过上述步骤，我们可以实现将上传的图片和图片信息显示在页面上而不上传到服务器。