vue3+vant4实现文件上传+图片/视频预览(单纯记录）

头发超多的cc

已于 2024-09-09 10:14:57 修改

阅读量128

点赞数 4

文章标签：音视频前端

于 2024-09-07 15:39:08 首次发布

本文链接：https://blog.csdn.net/weixin_60831172/article/details/141997090

版权

    <van-field name="uploader" readonly label="照片/视频">
                        </van-field>
                        <!-- 图片列表 -->
                        <div class="images-list">
                            <div class="image-list" v-if="imagesRef.length > 0">
                                <div v-for="(image, index) in imagesRef" :key="index" @click="previewImage(image)">
                                    <img :src="image.url" alt="Image"
                                        style="width: 100px; height: 100px; object-fit: cover;">
                                </div>
                            </div>

                            <!-- 视频列表 -->
                            <div class="image-list" v-if="videosRef.length > 0">
                                <div v-for="(video, index) in videosRef" :key="index" @click="previewVideo(video)">
                                    <video :src="video.url" controls
                                        style="width: 100px; height: 100px; object-fit: cover;">
                                        <!-- <source :src="video.url" type="video/mp4"> -->
                                    </video>
                                </div>
                            </div>
                        </div>

                        <!-- 图片预览 -->
                        <van-popup v-model:show="previewImageVisible" position="center"
                            :style="{ width: '100%', height: '60%' }">
                            <van-image style="width: 100%; height: 100%;" :src="previewImageUrl" fit="contain" />
                        </van-popup>

                        <!-- 视频预览 -->
                        <van-popup v-model:show="previewVideoVisible" position="center"
                            :style="{ width: '100%', height: '60%' }">
                            <van-video style="width: 100%; height: 100%;" :src="previewVideoUrl" />
                        </van-popup>

// 图片预览相关数据
const previewImageUrl = ref<string>('');
const previewImageVisible = ref<boolean>(false);

// 视频预览相关数据
const previewVideoUrl = ref<string>('');
const previewVideoVisible = ref<boolean>(false);
// 图片预览
const previewImage = (image: any) => {
    console.log('image', image, image.value);

    previewImageUrl.value = image.url;;
    previewImageVisible.value = true;
};

// 视频预览
const previewVideo = (video: any) => {
    console.log('预览video', video, video.value);

    previewVideoUrl.value = video.url;
    previewVideoVisible.value = true;
};