uniapp，上传视频图片、文件的组件

最新推荐文章于 2024-06-28 15:17:59 发布

小轻知

最新推荐文章于 2024-06-28 15:17:59 发布

阅读量1k

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/m0_47843571/article/details/125525820

版权

本文介绍如何在uniapp中自定义样式并实现视频、图片和文件的上传功能，通过实例代码帮助理解组件的使用方法。

摘要由CSDN通过智能技术生成

样式可以需要自己设计下

<template>
	<view class="">
		<view class="yd-acwarp">
			<view class="imgbox yd-warp yd-rela" v-for="(item, index) in checklist" :key="index">
				<image v-if="item[typeName] == 'jpg'||item[typeName] == 'png'||item[typeName] == 'image'"
					:src="item[keyName]" mode="" @click="check(index)"></image>
				<view @click="check(index)" class="yd-jbdcac yd-20pd0"
					v-else-if="item[typeName] == 'pdf'||item[typeName] == 'file'" style="background-color: #F2F2F2;">
					<u-icon name="file-text-fill" color="#80CBF9" size="22"></u-icon>
					<view class="oncolor yd-pd10 yd-mar0 yd-textcen">{
   {
    item.fileName ? item.fileName : item.userName }}
					</view>
				</view>
				<view v-else-if="item[typeName] == 'mp4'||item[typeName] == 'video'||item[typeName] == 'mp3'"
					class="yd-jbdcac videobox">
					<video class="video-box" :src="item[keyName]" @error="videoErrorCallback"
						:danmu-list="danmuList" enable-danmu danmu-btn controls style="z-index: 1;"></video>
					<view class="yd-abso yd-mar0" @click="check(index)">
					</view>
				</view>
				<view class="yd-abso filebtn yd-center" @click="deletefile(item, index)">
					<u-icon name="close" color="#ffffff" size="16"></u-icon>
				</view>
			</view>
			<view class="imgbox" @click="upload()">
				<view class="yd-center" style="background-color: #F2F2F2;">
					<u-icon name="arrow-upward" color="#0092ff" size="22"></u-icon>
					<view class="yd-20mar0  yd-btn">上传</view>
				</view>
			</view>
		</view>

		<u-action-sheet :actions="Annexcolumns" title="选择所上传的文件类型" :closeOnClickOverlay="true"
			:closeOnClickAction="true" :show="Annexshow" @select="Annexconfirm" @close="Annexshow = false">
		</u-action-sheet>

	</view>
</template>

<script>	
	/**
	 * yd-tabs
	 * @property {Array} list 数据 列表
	 * @property {String} keyName 演示文件的属性名
	 * @property {String} typeName 判断文件类型的逻辑属性
	 * @property {String} action 上传文件地址  （其他有需要传的参数自行定义）
	 */
	import {
   
		HTTP_REQUEST_URL
	} from '@/common/config