vue+elementui上传视频并回显

最新推荐文章于 2024-08-29 11:45:52 发布

原创

最新推荐文章于 2024-08-29 11:45:52 发布 · 5.4k 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #音视频

本文介绍了如何在Vue项目中结合ElementUI实现视频上传，并提供预览功能，确保用户能查看上传视频的内容。通过使用video标签，实现了上传视频后的回显功能。

之前上传视频我做的东西的话是没有办法看到视频的内容的，然后我们组长就说这个业务是不可以的，因为用户的话过了很久是会忘记自己这个视频是什么内容的，所以我们做一个上传视频的功能的话，是一定要一个回显，让用户可以看得到视频的内容。

那么我们可以用video标签来实现它

效果

vue部分

<el-form-item
              label="上传视频"
              style="margin-top: 15px; width: 49%"
              class="labelcolor"
              prop="videoUrl"
            >
              <el-upload
                :action="uploadFileUrl"
                :before-upload="beforeUpload"
                :on-success="handleUploadSuccess"
                :on-progress="uploadVideoProcess"
                :show-file-list="false"
                multiple
                :limit="1"
                :on-exceed="handleExceed"
                :file-list="fileList"
                class="avatar-uploader"
                id="avatar-uploader"
                :disabled="isDisabled"

最低0.47元/天解锁文章