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 小时前
如何提取某站 MV 视频中的音乐为 MP3 音频
音视频·简鹿视频格式转换器·视频提取mp3音频
yufengxinpian2 小时前
集成了高性能ARM Cortex-M0+处理器的一款SimpleLink 2.4 GHz无线模块-RF-BM-2340B1
单片机·嵌入式硬件·音视频·智能硬件
runing_an_min4 小时前
ffmpeg视频滤镜:替换部分帧-freezeframes
ffmpeg·音视频·freezeframes
runing_an_min6 小时前
ffmpeg视频滤镜:提取缩略图-framestep
ffmpeg·音视频·framestep
小曲曲7 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
安静读书9 小时前
Python解析视频FPS(帧率)、分辨率信息
python·opencv·音视频
佑华硬盘拷贝机9 小时前
音频档案批量拷贝:专业SD拷贝机解决方案
音视频
EasyNVR9 小时前
NVR管理平台EasyNVR多个NVR同时管理:全方位安防监控视频融合云平台方案
安全·音视频·监控·视频监控
xcLeigh17 小时前
HTML5超酷响应式视频背景动画特效(六种风格,附源码)
前端·音视频·html5
韩曙亮18 小时前
【FFmpeg】FFmpeg 内存结构 ③ ( AVPacket 函数简介 | av_packet_ref 函数 | av_packet_clone 函数 )
ffmpeg·音视频·avpacket·av_packet_clone·av_packet_ref·ffmpeg内存结构