el-upload标签实现图片上传

el-upload是element-ui中的一个组件，用于实现文件上传功能。

使用el-upload标签实现图片上传的步骤如下：

1. 引入element-ui组件库和样式文件。

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2. 在Vue实例中注册el-upload组件。

new Vue({
  el: '#app',
  components: {
    'el-upload': ElUpload
  },
  data: {
    imageUrl: '' // 保存上传后的图片地址
  },
  methods: {
    handleUploadSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw) // 设置图片地址
    }
  }
})

3. 在HTML中使用el-upload标签。

<el-upload
  class="avatar-uploader"
  :show-file-list="false"
  :on-success="handleUploadSuccess">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>

其中，:show-file-list="false"表示不显示上传文件列表，:on-success="handleUploadSuccess"表示上传成功后调用handleUploadSuccess方法。在handleUploadSuccess方法中，使用URL.createObjectURL方法将上传的文件转换成图片地址，并保存在imageUrl属性中，以便在页面中显示。