【Vue】使用ElementUI实现图片上传

在Vue项目中使用ElementUI实现图片上传功能，可以利用<el-upload>组件。以下是一个简单的例子：

1. 首先确保你已经安装并引入了ElementUI。
2. 在你的Vue组件中，可以这样使用<el-upload>：

<template>
  <el-upload
    class="upload-demo"
    action="https://jsonplaceholder.typicode.com/posts/" <!-- 这里替换为你的图片上传API -->
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    :on-success="handleSuccess"
    :on-error="handleError"
    :file-list="fileList"
    list-type="picture"
  >
    <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: []
    };
  },
  methods: {
    handlePreview(file) {
      // 预览图片逻辑
    },
    handleRemove(file, fileList) {
      // 移除图片逻辑
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleSuccess(response, file, fileList) {
      // 图片上传成功逻辑
    },
    handleError(err, file, fileList) {
      // 图片上传失败逻辑
    }
  }
};
</script>

在这个例子中，我们定义了一个Vue组件，其中包含了<el-upload>组件，用于处理图片上传的各个环节。你需要根据自己的后端API更改action属性的值。其他方法可以根据实际需求进行扩展或修改。