推荐一个插件:上传图片、视频 包括预览、压缩、手动上传、uniCloud上传 等功能 - DCloud 插件市场
基础代码:一句话解决直接上代码!!!
<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>