admin/ys-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加新 选择视频和图片的插件

Browse Source
This commit is contained in:
xuli
2025-12-23 18:10:37 +08:00
parent 03b2f64389
commit eddd2a4bf7
3 changed files with 176 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
src/pages/business/polling/problemReport.vue
View File

@@ -62,21 +62,23 @@
<!-- <video :src="item.url" controls></video> -->
<DomVideoPlayer :src="item2.url" objectFit="cover" />
</view>
<!-- #ifdef APP-PLUS -->
<view class="img-con" @click="chooseMedia">
<img :src="'static/images/polling/icon-AddPorV.png'" class="img-pic" />
<!-- loading -->
<view class="upload-loading" v-if="imgLoading">
<!-- loading -->
<view class="img-con" v-if="imgLoading">
<view class="upload-loading">
<uni-icons type="refreshempty" size="30" color="#C9C9C9"></uni-icons>
<view>上传中....</view>
</view>
</view>
<!-- #endif -->
<!-- #ifndef APP-PLUS -->
<view class="img-con">
<view class="img-con" @click="chooseMedia" v-else>
<img :src="'static/images/polling/icon-AddPorV.png'" class="img-pic" />
</view>
<!-- #ifdef APP-PLUS -->
<!-- #endif -->
<!-- #ifndef APP-PLUS -->
<!-- <view class="img-con">
<img :src="'static/images/polling/icon-AddPorV.png'" class="img-pic" />
</view> -->
<!-- #endif -->
</view>
</view>
@@ -89,14 +91,18 @@
<!-- 图片放大 -->
<mediaPreview :visible="isVisible" :url="mediaUrl" @close="handlePreviewClose"></mediaPreview>
<!-- 选择图片或者视频 -->
<chooseMediaVue ref="chooseMediaRef" @getMediaArr="getMediaArr" @closeMedia="closeMedia"></chooseMediaVue>
</view>
</template>
<script setup>
import { ref,onMounted,onUnmounted,nextTick,computed,reactive, watch } from 'vue'
import { ref,onMounted,onUnmounted,nextTick,computed,reactive, watch,getCurrentInstance } from 'vue'
import { onLoad,onShow,onHide} from '@dcloudio/uni-app';
import customHeader from '@/components/customHeader.vue';
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
import chooseMediaVue from '@/components/chooseMedia.vue'
import mediaPreview from "@/components/mediaPreview.vue"
import DomVideoPlayer from 'uniapp-video-player'
import { getUserInfo } from '@/api/auth.js'
@@ -104,6 +110,7 @@ import { problemDetail,problemAdd,problemEdit,minioUpload } from '@/api/polling.
import {compressImageUni,getFileType} from '@/utils/common.js'
import {showAlert,showLoading,hideLoading} from '@/utils/message.js'
import { MINIO_KEY } from '@/enums/cacheEnums';
const { proxy } = getCurrentInstance();
let taskId = ref('');//任务id
let groupId = ref('');//组id
@@ -124,6 +131,10 @@ onLoad(async option => {
getList();
})
onShow(()=>{
imgLoading.value=false;
})
// 查询列表
let list = ref([]);
let optionObj = ref({})
@@ -202,63 +213,98 @@ let imgArr=ref([]);//图片 后台返回的
let videoArr = ref([]);//视频 后台返回的
let imgLoading = ref(false)
const chooseMedia = () => {
uni.chooseMedia({
count: 9,
mediaType: ['image', 'video'], // 指定可选择图片和视频
sourceType: ['album', 'camera'],
maxDuration: 60, // 拍摄视频最长拍摄时间
camera: 'back',
success: (res) => {
// console.log("chooseMedia=>",res)
res.tempFiles.forEach(async file => {
// console.log(`文件类型: ${file.fileType}, 文件路径: ${file.tempFilePath}`);
let compressImg = file.tempFilePath;
// 图片进行压缩
if (file.fileType === 'image') {
// #ifdef APP-PLUS
// 压缩图片
compressImg = await compressImageUni(file.tempFilePath);
// #endif
}
// console.log("chooseMedia=>")
proxy.$refs["chooseMediaRef"].openPicker();
imgLoading.value=true;
// uni.chooseMedia({
// count: 9,
// mediaType: ['image', 'video'], // 指定可选择图片和视频
// sourceType: ['album', 'camera'],
// maxDuration: 60, // 拍摄视频最长拍摄时间
// camera: 'back',
// success: (res) => {
// // console.log("chooseMedia=>",res)
// res.tempFiles.forEach(async file => {
// // console.log(`文件类型: ${file.fileType}, 文件路径: ${file.tempFilePath}`);
// let compressImg = file.tempFilePath;
// // 图片进行压缩
// if (file.fileType === 'image') {
// // #ifdef APP-PLUS
// // 压缩图片
// compressImg = await compressImageUni(file.tempFilePath);
// // #endif
// }
// 执行上传
let param = {
filePath: compressImg,
name: 'file',
formData: {
directory:'polling'
},
}
imgLoading.value=true;
minioUpload(param).then(res=>{
let data = res.data;//console.log("上传成功后=>",res)
mediaArr.value.push(data.fileName);
if (file.fileType === 'image') {// 图片
imgArr.value.push({
shortUrl:minioObj.minioThumbUrl +"/"+data.fileName,
url:minioObj.minioUrl +"/"+data.fileName,
name:data.fileName
})
} else if (file.fileType === 'video') {// 视频
videoArr.value.push({
shortUrl:minioObj.minioThumbUrl +"/"+data.fileName,
url:minioObj.minioUrl +"/"+data.fileName,
name:data.fileName
})
}
}).finally(()=>{
imgLoading.value=false;
})
// // 执行上传
// let param = {
// filePath: compressImg,
// name: 'file',
// formData: {
// directory:'polling'
// },
// }
// imgLoading.value=true;
// minioUpload(param).then(res=>{
// let data = res.data;//console.log("上传成功后=>",res)
// mediaArr.value.push(data.fileName);
// if (file.fileType === 'image') {// 图片
// imgArr.value.push({
// shortUrl:minioObj.minioThumbUrl +"/"+data.fileName,
// url:minioObj.minioUrl +"/"+data.fileName,
// name:data.fileName
// })
// } else if (file.fileType === 'video') {// 视频
// videoArr.value.push({
// shortUrl:minioObj.minioThumbUrl +"/"+data.fileName,
// url:minioObj.minioUrl +"/"+data.fileName,
// name:data.fileName
// })
// }
// }).finally(()=>{
// imgLoading.value=false;
// })
});
}
});
// });
// }
// });
}
const closeMedia = ()=>{
imgLoading.value=false;
}
// 插件回调
const getMediaArr=(arr)=>{
// console.log("插件回调=>",arr)
try {
arr.forEach(data=>{
mediaArr.value.push(data.fileName);
if(data.fileType=="image"){
imgArr.value.push({
shortUrl:minioObj.minioThumbUrl +"/"+data.fileName,
url:minioObj.minioUrl +"/"+data.fileName,
name:data.fileName
})
}else if(data.fileType == "video"){
videoArr.value.push({
shortUrl:minioObj.minioThumbUrl +"/"+data.fileName,
url:minioObj.minioUrl +"/"+data.fileName,
name:data.fileName
})
}
})
// console.log(imgArr.value,videoArr.value)
imgLoading.value=false;
} catch (error) {
console.error(error)
imgLoading.value=false;
}
}
// 视频或图片删除 根据数组下标删除数组里的某个图片或视频
const handleDelete=(arr,index2)=>{
arr.splice(index2, 1);
let item = arr[index2];
arr.splice(index2, 1);
mediaArr.value = mediaArr.value.filter(item2=>item2!=item.name);
console.log("删除后=>",mediaArr.value)
}
@@ -303,7 +349,10 @@ const handleSubmit=()=>{
}
// console.log("problemEdit=>",param)
problemEdit(param).then(res=>{
showAlert("修改问题上报成功！")
// showAlert = (content, title = '提示',showCancel=false,succFun)
showAlert("修改问题上报成功！","提示",false,()=>{
uni.navigateBack()
})
}).finally(()=>{
hideLoading();
})
@@ -317,8 +366,10 @@ const handleSubmit=()=>{
}
// console.log("problemAdd=>",param)
problemAdd(param).then(res=>{
showAlert("新建问题上报成功！");
problemId.value = res;
showAlert("新建问题上报成功！","提示",false,()=>{
problemId.value = res;
uni.navigateBack()
})
}).finally(()=>{
hideLoading();
})