vue3+ts使用element的上传怎么上次文件显示图片

要在Vue3和TypeScript中使用Element Plus的上传组件并显示上传的图片，你可以按照以下步骤进行操作：

1. 首先，确保你已经安装了Element Plus和Vue Router插件，并在main.ts中进行了集成。你可以使用npm或yarn命令进行安装。

2. 在App.vue文件中，你需要修改模板部分，添加一个文件上传的组件。你可以使用`el-upload`组件来实现文件上传功能。在模板中，你可以添加一个`el-upload`标签，并设置相应的属性，如`action`、`onSuccess`等。同时，你可以使用`el-image`组件来显示上传的图片。在`el-upload`的`onSuccess`回调函数中，你可以将上传成功后的图片地址保存到data中，并在`el-image`中使用该地址进行显示。

3. 在App.vue的脚本部分，你需要导入`ref`和`reactive`函数，并在`setup`函数中定义一个`ref`变量来保存上传成功后的图片地址。在`onSuccess`回调函数中，你可以通过`ref`变量来更新图片地址。

下面是一个示例代码：

<template>
  <el-upload
    action="/upload"
    :on-success="handleUploadSuccess"
    :show-file-list="false"
  >
    <el-button>点击上传</el-button>
  </el-upload>
  <el-image v-if="imageUrl" :src="imageUrl" fit="contain"></el-image>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'App',
  setup() {
    const imageUrl = ref('');

    const handleUploadSuccess = (response) => {
      // 上传成功后的处理逻辑
      // 可以根据接口返回的数据来获取图片地址
      imageUrl.value = response.data.imageUrl;
    };

    return {
      imageUrl,
      handleUploadSuccess,
    };
  },
};
</script>

在上面的示例中，`handleUploadSuccess`函数是上传成功后的回调函数，你可以根据实际情况来处理上传成功后的逻辑。`imageUrl`是一个`ref`变量，用于保存上传成功后的图片地址。在模板中，使用`v-if`指令来判断是否有图片地址，如果有则显示`el-image`组件，并将图片地址作为`src`属性传递给`el-image`组件。

请注意，上述示例中的`action`属性需要根据你的实际后端接口进行设置，以确保文件上传功能正常工作。另外，你可能还需要根据实际需求对上传组件进行进一步的配置和样式调整。
#### 引用[.reference_title]
- *1* [vue3+ts引入element](https://blog.csdn.net/weixin_39945506/article/details/124613663)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [vite+vue3+ts+element-plus项目搭建--超详细](https://blog.csdn.net/weixin_44255044/article/details/119566408)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]