Vue 图片上传浏览器预览实现教程 - 详细步骤和示例代码 - 常规

要使用 Vue 写一个图片上传浏览器回显的前端，你可以按照以下步骤进行：

首先，在 Vue 项目中安装需要的库，例如：axios 和 element-ui。
在 Vue 组件中创建一个上传图片的表单，该表单需要包含一个 input 元素和一个 button 元素。
在 Vue 组件的 methods 中编写一个函数来处理图片上传的逻辑。该函数需要使用 axios 发送一个 POST 请求，将上传的图片文件发送到后端服务器。
在该函数中使用 Vue 的双向绑定来更新 Vue 组件中的图片预览。例如，在表单中添加一个 img 元素来预览上传的图片。
在 Vue 组件中使用 element-ui 的上传组件来实现文件选择和上传操作。该组件可以方便地处理文件上传的逻辑，并且可以提供预览和进度条等功能。
最后，在 Vue 组件中添加一些样式来美化上传表单和图片预览等元素。

下面是一个简单的 Vue 组件示例，用于上传图片并在浏览器中预览：

<template>
  <div>
    <el-form>
      <el-form-item label='上传图片'>
        <el-upload
          class='upload-demo'
          action='/api/upload'
          :show-file-list='false'
          :on-success='handleSuccess'
          :before-upload='beforeUpload'>
          <el-button size='small' type='primary'>点击上传</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
    <div class='image-preview'>
      <img v-if='imageUrl' :src='imageUrl' alt='上传的图片'>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      imageUrl: '',
    };
  },
  methods: {
    beforeUpload(file) {
      // 可以在这里添加文件格式验证等逻辑
      return true;
    },
    handleSuccess(res) {
      // 上传成功后的回调函数
      if (res.code === 0) {
        // 保存图片URL到Vue组件中，实现预览效果
        this.imageUrl = res.data.url;
      }
    },
  },
};
</script>

<style>
.upload-demo {
  margin-top: 10px;
}
.image-preview {
  margin-top: 20px;
}
.image-preview img {
  max-width: 300px;
  max-height: 300px;
}
</style>