微信小程序实现上传视屏并编辑

pzxispzx

已于 2022-05-03 17:13:37 修改

阅读量2.4k

点赞数 1

分类专栏：微信小程序文章标签：微信小程序小程序 javascript

于 2022-05-03 16:29:40 首次发布

本文链接：https://blog.csdn.net/weixin_45695686/article/details/124556589

版权

本文介绍了如何在微信小程序中实现视频上传并在线播放的功能。用户可以上传视频，之后能够选择播放或删除。视频内容存储在云存储中，同时在云数据库中创建相应记录。文中详细阐述了实现步骤，包括页面创建、WXML结构、JS逻辑，并提示了大文件可能造成播放黑屏的问题。此外，还提供了删除视频的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

阅读说明：
本文是实现用户上传视频并可以在线播放，选择删除。视频上传到云存储，并在云数据库中添加记录。

下面包含：1效果截图及截图说明，2实现步骤及源码。
1：效果截图及截图说明：
1.1初次进入页面看到的视图如下：
在这里插入图片描述
1.2点击上传视频并上传视频完成后，点击刷新视频信息，看见的试图如下：
（可以选择视频并能播放，视频太大可能会黑屏）

2：实现步骤：
2.1创建页面：
1：app.json中代码如下：

"pages/mi6_file/file"

2：file.wxml代码：

<button size="mini" type="primary" bindtap="getMessage">刷新视频信息</button>
<button bindtap="onloadvid">上传视频</button>
  <block wx:for="{
   { vidInfo}}" wx:key="_id">
    <video src="{
   {item.vid}}" custom-cache="{
   {false}}" ></video>
  </block>