VUE3+TS+setup行内使用elementplus封装图片上传,父组件用v-model传值

好的，你的问题是关于Vue3和TypeScript结合使用Element Plus组件库进行图片上传并使用v-model进行值传递的问题。那么我来为你解答一下：

首先，在Vue3中，我们可以使用`<script setup>`语法来编写组件逻辑，这样可以更加简洁和易于理解。同时，使用TypeScript可以让我们在开发过程中更加规范和高效。

其次，对于Element Plus组件库的使用，我们可以通过`import`语句引入需要使用的组件。在图片上传组件中，我们可以使用`<el-upload>`组件来进行上传操作。同时，我们可以通过`v-model`来进行值的双向绑定，从而实现父子组件之间的数据传递。

下面是一个示例代码，供你参考：

<template>
  <el-upload
    class="upload-demo"
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
    v-bind="$attrs"
    v-model="fileList"
    :auto-upload="false"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">
      只能上传jpg/png文件，且不超过500kb
    </div>
  </el-upload>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';
import { ElUpload } from 'element-plus';

interface UploadProps {
  value: any;
  onChange: (val: any) => void;
}

const props = defineProps<UploadProps>({
  value: {},
  onChange: () => {},
});

const fileList = props.value;

const handleSuccess = (res: any, file: any) => {
  console.log(res, file);
};

const beforeUpload = (file: any) => {
  const isJpgOrPng =
    file.type === 'image/jpeg' || file.type === 'image/png';
  const isLt500Kb = file.size / 1024 < 500;

  if (!isJpgOrPng) {
    this.$message.error('只能上传jpg/png文件');
    return false;
  }
  if (!isLt500Kb) {
    this.$message.error('文件大小不能超过500kb');
    return false;
  }
  return true;
};

watch(
  () => fileList,
  (newVal) => {
    props.onChange(newVal);
  }
);
</script>

在父组件中，我们可以使用`v-model`来进行值的双向绑定，如下所示：

<template>
  <div>
    <Upload v-model="imageUrl" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Upload from './Upload.vue';

const imageUrl = ref('');

</script>

这样，当子组件中的值发生变化时，父组件中的`imageUrl`变量也会相应地更新。

希望这个回答能够帮助到你，如有疑问，欢迎继续追问。