vue2 element-ui上传图片

要在 Vue2 中使用 Element-UI 进行图片上传，需要进行以下步骤：

1. 安装 Element-UI：

npm install element-ui --save

2. 引入 Element-UI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3. 在 HTML 中添加上传组件：

<template>
  <div>
    <el-upload
      class="avatar-uploader"
      :action="uploadUrl"
      :show-file-list="false"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

其中，`:action` 属性指定了上传图片的地址，`:show-file-list` 属性设置为 `false`，表示不展示上传的文件列表，`:on-success` 属性指定了上传成功后的回调函数，`:before-upload` 属性指定了上传之前的回调函数。

4. 在 JavaScript 中添加上传相关方法：

<script>
export default {
  data() {
    return {
      imageUrl: '',
      uploadUrl: 'your-upload-url'
    }
  },
  methods: {
    handleSuccess(res) {
      this.imageUrl = URL.createObjectURL(res.raw)
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
        return false
      }
      return true
    }
  }
}
</script>

其中，`handleSuccess` 方法在上传成功后将图片显示出来，`beforeUpload` 方法用于校验上传的图片格式和大小，并在校验失败时提示错误信息。

以上就是使用 Element-UI 进行图片上传的基本流程。