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>
相关推荐
却道天凉_好个秋2 小时前
音视频学习(三十六):websocket协议总结
websocket·音视频
【余185381628004 小时前
碰一碰发视频源码搭建定制化开发:支持OEM
音视频
EQ-雪梨蛋花汤4 小时前
【Part 3 Unity VR眼镜端播放器开发与优化】第四节|高分辨率VR全景视频播放性能优化
unity·音视频·vr
菜包eo8 小时前
基于二维码的视频合集高效管理与分发技术
音视频
文浩(楠搏万)8 小时前
用OBS Studio录制WAV音频,玩转语音克隆和文本转语音!
大模型·音视频·tts·wav·obs·声音克隆·语音录制
aqi0014 小时前
FFmpeg开发笔记(七十二)Linux给FFmpeg集成MPEG-5视频编解码器EVC
android·ffmpeg·音视频·流媒体
花开花落的个人博客16 小时前
ESP32-S3开发板播放wav音频
音视频
顾道长生'1 天前
(Arxiv-2025)通过动态 token 剔除实现无需训练的高效视频生成
计算机视觉·音视频·视频生成
每次的天空1 天前
Android-自定义View的实战学习总结
android·学习·kotlin·音视频
爱分享的飘哥1 天前
【V6.0 - 听觉篇】当AI学会“听”:用声音特征捕捉视频的“情绪爽点”
人工智能·音视频