vue+elementui 写一段手动图片上传

好的，以下是一个手动上传图片的 Vue 代码，使用了 ElementUI 的 Upload 组件：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action=""
      :show-file-list="false"
      :on-change="handleChange"
      :before-upload="beforeUpload"
    >
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </el-upload>
    <el-image
      v-if="imageUrl"
      :src="imageUrl"
      style="max-width: 400px; margin-top: 10px;"
    ></el-image>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '', // 图片链接
      imagePath: '', // 图片文件路径
    };
  },
  methods: {
    handleChange(file, fileList) {
      // 选择文件后的处理
      this.imagePath = file.raw;
      this.imageUrl = URL.createObjectURL(file.raw);
      this.$message.success(`成功上传文件：${file.name}`);
    },
    beforeUpload(file) {
      // 上传前的验证
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt500K = file.size / 1024 < 500;

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!');
      }
      if (!isLt500K) {
        this.$message.error('上传图片大小不能超过 500KB!');
      }
      return isJPG && isLt500K;
    },
  },
};
</script>

注意，这里的 `show-file-list` 属性设置为 false，表示不显示上传成功的文件列表。同时，需要在 `handleChange` 方法中使用 `URL.createObjectURL` 生成图片链接，以便在页面上显示。如果需要将图片上传到服务器，需要在 `beforeUpload` 方法中设置上传接口地址，并在后端实现文件接收和存储功能。