elementui 上传图片

ElementUI 提供了一个 `el-upload` 组件来实现图片上传功能，以下是一个简单的示例：

<template>
  <el-upload
    class="upload-demo"
    action="//jsonplaceholder.typicode.com/posts/"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    :file-list="fileList"
    :auto-upload="false"
    list-type="picture"
    :headers="{'Authorization': token}"
    :data="{userId: userId}"
    :multiple="true"
    :limit="3"
    :on-exceed="handleExceed"
    :show-file-list="false"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      token: 'your_token',
      userId: 'your_userId'
    }
  },
  methods: {
    handleSuccess(response, file, fileList) {
      console.log(response, file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      }

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }

      return isJPG && isLt2M;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 ${this.limit} 张图片，本次选择了 ${files.length} 张图片，共选择了 ${files.length + fileList.length} 张图片`);
    }
  }
}
</script>

<style>
.upload-demo {
  margin-top: 20px;
}
</style>

上面的示例中，我们通过配置 `el-upload` 组件的不同属性来实现以下功能：

- `action`：上传图片的接口地址
- `on-preview`：点击预览图片时的回调函数
- `on-remove`：点击删除图片时的回调函数
- `on-success`：图片上传成功时的回调函数
- `before-upload`：上传图片之前的校验函数
- `file-list`：已上传的图片列表
- `auto-upload`：是否自动上传
- `list-type`：文件列表的类型，这里设置为 `picture`，表示只显示图片
- `headers`：请求头信息
- `data`：上传图片时需要携带的参数
- `multiple`：是否支持多选
- `limit`：限制上传图片的数量
- `on-exceed`：超过上传图片数量限制时的回调函数
- `show-file-list`：是否显示文件列表

以上是 ElementUI 实现上传图片的基本示例，你可以根据实际需求来配置组件的不同属性。