app上传图片和视频

推荐一个插件:上传图片、视频 包括预览、压缩、手动上传、uniCloud上传 等功能 - DCloud 插件市场

基础代码:一句话解决直接上代码!!!

html 复制代码
<template>
	<view class="modify-page">
		<u-navbar title="工单详情" @leftClick="onClickLeft" />
		<view class="main">
			<cl-upload v-model="list" cloudType="other" :action="action" :headers="headers" @onSuccess="onSuccess"></cl-upload>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 系统状态栏的高度
				systemBarHeight: 0,
				list: [
					{
						path: 'https://p6.itc.cn/q_70/images01/20220727/1f0b91f068744223823ca585f8ad0446.jpeg'
					},
					{
						path: 'https://mp-61599c79-d7ee-4a75-a24b-e5a288da6dd3.cdn.bspapp.com/VKCEYUGU-61599c79-d7ee-4a75-a24b-e5a288da6dd3/20201008191803_6757b.jpeg'
					},
					{
						path: 'https://ys-guoyuan.oss-cn-hangzhou.aliyuncs.com/upload/20221209/efe096ba425a740387c111bc36d6ae06.mp4',
					}
				
				],
				action: "https://gy.ysxdgy.com/v1/common/upload",
				headers: {
					token: 'e672c63d4e034fc08054f83ad479ee3e'
				}
			};
		},
		onLoad(id) {
			console.log(id);
			this.getSysteminfo()
		},
		methods: {
			// 获取系统栏高度
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			onClickLeft () {
				uni.navigateBack({
					delta: 1 // 返回的页面数,这里设置为1表示返回上一页
				});
			},
			onSuccess(reslut) {
				// 把服务端返回的图片地址添加到list中与组件数据同步
				this.list.push(reslut.data.link)
			},
		}
	}
</script>

<style lang="scss">
.modify-page {
	width: 100vw;
	height: 100vh;
	::v-deep .u-navbar {
		height: 50px;
	}
	.main {
		width: 100%;
		height: calc(100% - 50px);
		background-color: #fff;
		overflow: auto;
		padding: 0 20rpx;
		box-sizing: border-box;
	}
}
</style>
相关推荐
SY.ZHOU13 小时前
H264的NALU结构
音视频·视频编解码
步、步、为营14 小时前
.NET + WPF框架开发聊天、网盘、信息发布、视频播放功能
.net·wpf·音视频
愿你天黑有灯下雨有伞16 小时前
从数据库到播放器:Java视频续播功能完整实现解析
java·数据库·音视频
甲方求你学点技术吧18 小时前
8:从USB摄像头把声音拿出来--ALSA大佬登场!
linux·图像处理·ffmpeg·音视频
EasyCVR20 小时前
现场设备无法向视频汇聚EasyCVR视频融合平台推流的原因排查与解决过程
音视频
菜包eo1 天前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
王者鳜錸1 天前
使用Selenium自动化获取抖音创作者平台视频数据
selenium·自动化·音视频
却道天凉_好个秋1 天前
音视频学习(三十七):pts和dts
音视频·pts·dts
沐尘而生1 天前
【AI智能体】智能音视频-搭建可视化智能体
数据库·人工智能·ai作画·音视频·娱乐
子时不睡1 天前
【Datawhale AI 夏令营】 用AI做带货视频评论分析(一)
人工智能·深度学习·音视频