vue elementui实现图片上传

在 Vue 中，可以使用 Element UI 的 Upload 组件来实现图片上传功能。以下是一个示例：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/upload"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :headers="{ Authorization: token }"
      :data="{ extraData: 'data' }"
      :multiple="true"
      :limit="3"
      :file-list="fileList"
      list-type="picture-card"
      :show-file-list="false"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-button
      class="upload-demo-submit"
      type="primary"
      @click="submitUpload"
      :disabled="!fileList.length"
    >
      上传至服务器
    </el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [],
      token: "your_token"
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      console.log(response);
    },
    beforeUpload(file) {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.error("只能上传 JPG/PNG 格式的图片");
        return false;
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 2MB!");
        return false;
      }
      return true;
    },
    submitUpload() {
      this.$refs.upload.submit();
    }
  }
};
</script>

在上述代码中，我们使用了 Element UI 的 Upload 组件来实现图片上传功能，通过设置 action 属性来指定上传图片的 API 接口地址，通过设置 beforeUpload 方法来限制上传的图片格式和大小，通过设置 headers 和 data 属性来传递 token 和额外的数据，通过设置 fileList 属性来展示已上传的图片列表。最后，通过调用 submit 方法来触发上传操作。