用 vant 加video 可以多个上传视频 查看可以删除

好的，您可以通过以下步骤使用 vant 和 video 来实现多个视频的上传、显示和删除：

1. 首先，您需要在您的项目中安装 vant。您可以使用以下命令来安装 vant：

   npm install vant --save

2. 然后，您需要在您的代码中引入 vant 的 video 组件和上传文件组件。您可以使用以下代码：

   import { Video, Uploader, Cell, CellGroup, Dialog } from 'vant';

在这里，`Cell` 和 `CellGroup` 组件用于显示上传的视频列表，`Dialog` 组件用于显示删除确认对话框。

3. 接下来，您需要为上传文件组件设置上传地址和上传成功后的回调函数。您可以使用以下代码：

   <Uploader
     action="your_upload_url"
     onSuccess={successCallback}
   />

在这里，`your_upload_url` 是您的上传视频的地址，`successCallback` 是上传成功后的回调函数。

4. 在回调函数中，您可以将上传成功的视频地址保存到您的数据库中，并在页面中显示视频列表。您可以使用以下代码：

   const successCallback = (response, file) => {
     // 将上传成功的视频地址保存到数据库中
     const videoUrl = response.data.url;
     const videos = this.state.videos;
     videos.push(videoUrl);
     this.setState({ videos });
   };

在这里，`this.state.videos` 是您保存视频地址的数组。

5. 在页面中，您可以使用 `Cell` 和 `CellGroup` 组件来显示上传的视频列表，并为每个视频添加删除按钮。您可以使用以下代码：

   <CellGroup>
     {this.state.videos.map((video, index) =>
       <Cell
         key={index}
         title="视频名称"
         value={<Video src={video} />}
         onClick={() => this.showDeleteDialog(index)}
       />
     )}
   </CellGroup>

在这里，`this.showDeleteDialog` 是用于显示删除确认对话框的函数。

6. 最后，您可以在删除确认对话框中实现删除视频的功能。您可以使用以下代码：

   <Dialog
     title="确认删除"
     message="您确定要删除这个视频吗？"
     showCancelButton
     confirmButtonText="删除"
     cancelButtonText="取消"
     onConfirm={() => this.deleteVideo()}
     onCancel={() => this.hideDeleteDialog()}
     show={this.state.showDeleteDialog}
   />

在这里，`this.deleteVideo` 是用于删除视频的函数，`this.hideDeleteDialog` 是用于隐藏删除确认对话框的函数，`this.state.showDeleteDialog` 是用于控制删除确认对话框显示和隐藏的状态。

希望这些步骤可以帮助您实现多个视频的上传、显示和删除功能。