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

好的，您的第一个问题是关于在 TypeScript 中使用 Element Plus 封装图片上传组件，同时使用 v-model 在父组件中传值的问题。

首先，在父组件中，我们需要使用 v-model 指令来绑定子组件的值和父组件的值：

<template>
  <div>
    <image-upload v-model="imageUrl"></image-upload>
  </div>
</template>

在子组件中，我们需要定义一个 value 属性和一个 input 事件来实现双向绑定：

<template>
  <div>
    <el-upload
      :action="uploadUrl"
      :on-success="handleSuccess"
      :show-file-list="false"
    >
      <el-button>{{ buttonText }}</el-button>
    </el-upload>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'

export default defineComponent({
  props: {
    value: {
      type: String as PropType<string>,
      default: ''
    }
  },
  emits: ['update:value'],
  setup(props, { emit }) {
    const uploadUrl = 'your_upload_url'
    const buttonText = '上传图片'

    function handleSuccess(response: any) {
      const imageUrl = response.data.url
      emit('update:value', imageUrl)
    }

    return {
      uploadUrl,
      buttonText,
      handleSuccess
    }
  }
})
</script>

在子组件中，我们使用了 defineComponent 函数来定义组件，并且指定了 props 和 emits 属性。props 中定义了一个名为 value 的属性，类型为 String，并且默认值为空字符串。emits 中定义了一个名为 update:value 的事件，用来触发父组件中的 v-model 指令。在 setup 函数中，我们定义了 uploadUrl 和 buttonText 变量，分别用来指定上传图片的 URL 和上传按钮的文本。handleSuccess 函数用来处理上传成功后的响应，从中获取图片的 URL，并且触发 update:value 事件，将 URL 传递给父组件。

最后，我们需要在父组件中定义一个 imageUrl 变量，用来保存子组件传递过来的图片 URL。

完整的代码如下：

<template>
  <div>
    <image-upload v-model="imageUrl"></image-upload>
    <img :src="imageUrl" alt="uploaded image" v-if="imageUrl">
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import ImageUpload from '@/components/ImageUpload.vue'

export default defineComponent({
  components: {
    ImageUpload
  },
  setup() {
    const imageUrl = ref('')

    return {
      imageUrl
    }
  }
})
</script>

在这个例子中，我们使用了 ref 函数来定义一个名为 imageUrl 的响应式变量。在模板中，我们使用 v-if 指令来判断 imageUrl 是否为空，如果不为空，则显示上传的图片。