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>
相关推荐
MediaTea1 小时前
Pr 视频过渡:沉浸式视频 - VR 色度泄漏
音视频·vr
LNTON羚通1 小时前
算法定制LiteAIServer摄像机实时接入分析平台烟火检测算法的主要功能
音视频·视频监控
EasyCVR7 小时前
EHOME视频平台EasyCVR视频融合平台使用OBS进行RTMP推流,WebRTC播放出现抖动、卡顿如何解决?
人工智能·算法·ffmpeg·音视频·webrtc·监控视频接入
冷凝女子9 小时前
【QT】海康视频及openCv抓拍正脸接口
qt·opencv·音视频·海康
安步当歌10 小时前
【WebRTC】视频编码链路中各个类的简单分析——VideoStreamEncoder
音视频·webrtc·视频编解码·video-codec
顾北川_野10 小时前
Android CALL关于电话音频和紧急电话设置和获取
android·音视频
顶呱呱程序10 小时前
2-143 基于matlab-GUI的脉冲响应不变法实现音频滤波功能
算法·matlab·音视频·matlab-gui·音频滤波·脉冲响应不变法
EasyCVR11 小时前
萤石设备视频接入平台EasyCVR多品牌摄像机视频平台海康ehome平台(ISUP)接入EasyCVR不在线如何排查?
运维·服务器·网络·人工智能·ffmpeg·音视频
runing_an_min11 小时前
ffmpeg 视频滤镜:屏蔽边框杂色- fillborders
ffmpeg·音视频·fillborders
我喜欢就喜欢1 天前
基于qt vs下的视频播放
开发语言·qt·音视频