app上传图片和视频

最新推荐文章于 2024-08-24 16:43:50 发布

小政爱学习！

最新推荐文章于 2024-08-24 16:43:50 发布

阅读量363

点赞数 1

文章标签：音视频

本文链接：https://blog.csdn.net/m0_58361435/article/details/136910613

版权

本文介绍了如何在DCloud的项目中，通过cl-upload组件实现上传图片和视频的功能，包括预览、压缩以及调用uniCloud服务。展示了基础代码片段，展示了如何设置云类型、动作URL、请求头以及处理服务器返回的数据。

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

基础代码：一句话解决直接上代码！！！

<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>