<script lang="ts" setup>使用elementplus封装图片上传,父组件用v-model传值

好的，以下是一个基于 Vue3、TypeScript 和 Element Plus 的图片上传组件封装，支持使用 `v-model` 传递值：

<template>
  <div>
    <el-upload
      class="image-uploader"
      :action="uploadUrl"
      :show-file-list="false"
      :before-upload="beforeUpload"
      :on-success="handleSuccess"
      :on-error="handleError"
    >
      <img v-if="imageUrl" :src="imageUrl" class="image-preview" />
      <i v-else class="el-icon-plus image-icon"></i>
    </el-upload>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, ref, watch } from 'vue';
import { ElUpload } from 'element-plus';

export default defineComponent({
  name: 'ImageUploader',
  components: {
    ElUpload,
  },
  props: {
    uploadUrl: {
      type: String,
      required: true,
    },
    value: {
      type: String,
      default: '',
    },
  },
  emits: ['update:value'],
  setup(props, { emit }) {
    const imageUrl = ref<string>(props.value);

    watch(
      () => props.value,
      (newValue) => {
        imageUrl.value = newValue;
      },
    );

    const beforeUpload = (file: 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;
    };

    const handleSuccess = (response: any) => {
      imageUrl.value = response.url;
      emit('update:value', response.url);
      this.$message.success('上传成功');
    };

    const handleError = (error: any) => {
      this.$message.error('上传失败');
    };

    return {
      imageUrl,
      beforeUpload,
      handleSuccess,
      handleError,
    };
  },
});
</script>

<style scoped>
.image-uploader {
  width: 128px;
  height: 128px;
  border: 1px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.image-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-icon {
  font-size: 36px;
  color: #999;
}
</style>

这个组件中，我们使用了 Element Plus 的 `ElUpload` 组件来实现图片上传。在 `beforeUpload` 方法中，我们校验了上传的文件类型和大小，如果不符合要求则返回 false。在 `handleSuccess` 方法中，我们将上传成功后的图片地址保存在 `imageUrl` 引用中，并使用 `$emit` 方法向父组件发送 `update:value` 事件以更新 `v-model` 绑定的值。在 `handleError` 方法中，我们简单地显示了一个上传失败的提示信息。

希望这个示例能够帮助你封装一个支持 `v-model` 传值的图片上传组件。