element-ui上传图片

Element UI 组件库同样提供了上传图片的组件 `el-upload`，使用起来也非常简单。

安装：

npm install element-ui --save

在 Vue 组件中引入：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="your_upload_url"
      :before-upload="beforeUpload"
      :on-success="onSuccess"
      :limit="1"
      :headers="headers"
      :data="formData"
      :file-list="fileList"
    >
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
  </div>
</template>

<script>
import { ElUpload, ElButton } from 'element-ui';

export default {
  components: {
    ElUpload,
    ElButton,
  },
  data() {
    return {
      headers: {
        Authorization: 'Bearer your_token',
      },
      formData: {
        name: 'your_name',
      },
      fileList: [],
    };
  },
  methods: {
    beforeUpload(file) {
      // 过滤文件，可以根据文件类型、大小等进行过滤
    },
    onSuccess(response, file, fileList) {
      // 上传完成后的回调函数
    },
  },
};
</script>

其中，`action` 是上传图片的接口地址，`before-upload` 是上传前的过滤函数，`on-success` 是上传完成后的回调函数，可以在这里处理上传成功后的逻辑，`limit` 表示最多上传几张图片，`headers` 是请求头，可以在这里携带 token 等信息，`data` 是请求参数，可以在这里携带其他参数，`file-list` 是上传文件列表，需要双向绑定。

需要注意的是，同样需要在后端进行相应的接口开发和文件处理。