vue和elementui实现上传照片

以下是使用Vue和ElementUI实现上传照片的示例代码：

1. 在HTML中添加图片上传组件：

<el-upload
  name="file"
  action="/upload"
  accept=".jpg, .png"
  list-type="picture"
  :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>

2. 在Vue的methods中定义上传前的操作和上传成功的回调函数：

methods: {
  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 格式的图片');
    }
    if (!isLt2M) {
      this.$message.error('图片大小不能超过 2MB');
    }

    return (isJPG || isPNG) && isLt2M;  },
  handleSuccess(response) {
    this.imageUrl = response.url;
  }
}

3. 在Vue的data中定义imageUrl变量，用于显示上传成功后的图片：

data() {
  return {
    imageUrl: ''
  };
}

请注意，上述代码仅为示例，具体的上传接口和样式需要根据实际情况进行调整。