VUE上传临时图片可以随时查看但不提交

在Vue.js中，你可以通过使用File API和第三方库如Vue-File-Reader或Element UI的`el-upload`组件来实现上传临时图片并实时预览但不立即提交到服务器的功能。以下是步骤：

1. 安装依赖：
- 如果你使用的是Vue CLI项目，可以在`main.js`或`vue.config.js`中引入相应的插件，例如`vue-file-reader`。

npm install vue-file-reader

2. 使用`vue-file-reader`：
- 在模板文件中创建一个`<input>`标签，设置`type="file"`，允许用户选择图片，并绑定事件监听器，比如`@change="handleImageChange"`。

<input type="file" @change="handleImageChange">

3. 预览图片函数 (`handleImageChange`):
- 在methods里定义这个函数，接收`event`作为参数，获取选中的文件，然后读取内容。

methods: {
  handleImageChange(e) {
    const file = e.target.files[0];
    this.reader.readAsDataURL(file);
  },
  reader: {
    readAsDataURL(file) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader();
        reader.onload = () => {
          resolve(reader.result); // 返回Base64编码的URL
        };
        reader.onerror = (error) => {
          reject(error);
        };
        reader.readAsDataURL(file);
      });
    }
  }
},

4. 实现预览：
- 获取到Base64 URL后，在页面上显示图片，通常会是一个`<img>`元素动态绑定src属性。

<img :src="previewUrl" alt="暂存图片">

5. 更新 `previewUrl`：
- 当读取完成后，将结果赋值给`previewUrl`变量。

reader.onloadend = () => {
  this.previewUrl = this.reader.result;
};