什么网站可以接装修活,资深的网站推广,太阳代理ip官网,wordpress 主题笔记uni-app中的uni-file-picker可单独上传照片或视频#xff0c;但不支持同时上传照片和视频。本篇博客使用image标签和video标签实现移动端#xff08;H5app小程序#xff09;中照片和视频的同时上传。 本篇博客采用的是照片和视频的单独上传#xff0c;但可同时展示#xf… uni-app中的uni-file-picker可单独上传照片或视频但不支持同时上传照片和视频。本篇博客使用image标签和video标签实现移动端H5app小程序中照片和视频的同时上传。 本篇博客采用的是照片和视频的单独上传但可同时展示支持照片和视频的删除其中照片和视频均是调用的后端的接口上传至服务器中大家可根据个人需要灵活存储照片和视频。
实现效果 实现代码
将照片和视频区分上传并单独处理照片采用image标签视频采用video标签。
template!-- 上传视频或者图片 --view classup-page!--图片--view classshow-box v-for(item, index) in imageList :keyindeximageclassfull:srcitem:data-srcimagetappreviewImage(item)/imageview classdelect-icon tapdelect(index)image classfull :srcclearIcon mode/image/view/view!--视频--view classshow-box v-for(item1, index1) in videoList :keyindex1video classfull :srcitem1/videoview classdelect-icon tapdelectVideo(index1)image classfull :srcclearIcon mode/image/view/viewview v-ifVideoOfImagesShow tapchooseVideoImage classbox-modeimage classfull :srcselectfile mode/image/view/view
/template
对照片和视频分别进行上传、删除等操作避免index值出现错乱出现错删和误删。
配置项可进行父组件的传值灵活设置。
此处处理的是将后端上传后的照片或视频id传递出去此处可根据个人需求灵活设置。但需注意的是imageList和videoList不要轻易改变此处是专门使用了对应的id数组进行了重新定义。
script setup
import { uploadImg, uploadVideo } from /api/uploadconst emit defineEmits([getImgUploadIds, getVideoUploadIds])var sourceType [[camera], [album], [camera, album]]const clearIcon ref(data:image/svgxml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMCAwaDE2YTQgNCAwIDAgMSA0IDR2MTZINGE0IDQgMCAwIDEtNC00VjB6IiBmaWxsPSJ1cmwoI3BhaW50MF9saW5lYXIpIiBmaWxsLW9wYWNpdHk9Ii45OCIgZmlsdGVyPSJ1cmwoI2ZpbHRlcjBfYikiLz48cGF0aCBkPSJNMTAuOTQgOS45OTlsMi44NjMtMi44NTdhLjY2OS42NjkgMCAxIDAtLjk0Ni0uOTQ2TDEwIDkuMDYgNy4xNDMgNi4xOTZhLjY2OS42NjkgMCAwIDAtLjk0Ni45NDZsMi44NjQgMi44NTctMi44NjQgMi44NTdhLjY2Ni42NjYgMCAwIDAgLjIxNyAxLjA5Mi42NjQuNjY0IDAgMCAwIC43MjktLjE0NkwxMCAxMC45MzhsMi44NTcgMi44NjRhLjY2Ny42NjcgMCAwIDAgMS4wOTItLjIxNy42NjYuNjY2IDAgMCAwLS4xNDYtLjcyOUwxMC45MzkgMTB6IiBmaWxsPSIjZmZmIi8PGRlZnMPGZpbHRlciBpZD0iZmlsdGVyMF9iIiB4PSItNCIgeT0iLTQiIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCIgZmlsdGVyVW5pdHM9InVzZXJTcGFjZU9uVXNlIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPjxmZUZsb29kIGZsb29kLW9wYWNpdHk9IjAiIHJlc3VsdD0iQmFja2dyb3VuZEltYWdlRml4Ii8PGZlR2F1c3NpYW5CbHVyIGluPSJCYWNrZ3JvdW5kSW1hZ2UiIHN0ZERldmlhdGlvbj0iMiIvPjxmZUNvbXBvc2l0ZSBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0iaW4iIHJlc3VsdD0iZWZmZWN0MV9iYWNrZ3JvdW5kQmx1ciIvPjxmZUJsZW5kIGluPSJTb3VyY2VHcmFwaGljIiBpbjI9ImVmZmVjdDFfYmFja2dyb3VuZEJsdXIiIHJlc3VsdD0ic2hhcGUiLz48L2ZpbHRlcj48bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXIiIHgxPSIyMCIgeDI9IjE1LjU4NiIgeTI9IjIyLjk0IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIPHN0b3Agc3RvcC1jb2xvcj0iIzBEMUUyOCIgc3RvcC1vcGFjaXR5PSIuOCIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzA1MEUxMiIgc3RvcC1vcGFjaXR5PSIuNjUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48L3N2Zz4
)
const selectfile ref(data:image/svgxml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB4PSIuMjUiIHk9Ii4yNSIgd2lkdGg9IjYzLjUiIGhlaWdodD0iNjMuNSIgcng9IjMuNzUiIGZpbGw9IiNGMkYyRjIiIHN0cm9rZT0iI0YyRjJGMiIgc3Ryb2tlLXdpZHRoPSIuNSIvPjxyZWN0IHg9IjE2IiB5PSIzMSIgd2lkdGg9IjMyIiBoZWlnaHQ9IjIiIHJ4PSIxIiBmaWxsPSIjQkZCRkJGIi8PHJlY3QgeD0iMzMiIHk9IjE2IiB3aWR0aD0iMzIiIGhlaWdodD0iMiIgcng9IjEiIHRyYW5zZm9ybT0icm90YXRlKDkwIDMzIDE2KSIgZmlsbD0iI0JGQkZCRiIvPjwvc3ZnPg
)
const VideoOfImagesShow ref(true) // 页面图片或视频数量超出后拍照按钮隐藏
const imageList ref([]) //存放图片的地址
const imageListIds ref([]) //存放图片id的地址
const videoList ref([]) //视频存放的地址
const videoListIds ref([]) //存放视频id的地址
// const sourceType ref([拍摄, 相册, 拍摄或相册])
const sourceTypeIndex ref(2)
const cameraList ref([{value: back,name: 后置摄像头,checked: true},{value: front,name: 前置摄像头}
])
const cameraIndex ref(0) // 上传视频时的数量
const props defineProps({// 上传配置项uploadConfig: {type: Object,required: true,default: () {return {// maxCount: 3,// exParam: imgArr}}},imgUrlStr: {type: [String, Array],required: true,default: () {return []}}
})
// onUnload((val) {
// ;(imageList.value []),
// (sourceTypeIndex.value 2),
// (sourceType.value [拍摄, 相册, 拍摄或相册])
// }),
// 点击上传图片或视频
function chooseVideoImage() {uni.showActionSheet({title: 选择上传类型,itemList: [图片, 视频],success: (res) {if (res.tapIndex 0) {chooseImages()} else {chooseVideo()}}})
}
//上传图片
function chooseImages() {uni.chooseImage({count: props.uploadConfig.maxCount, // 允许选择的数量sizeType: [original, compressed], // 可以指定是原图还是压缩图默认二者都有sourceType: [album, camera], // 从相册选择success: (e) {uni.showLoading({mask: true,title: 上传中请稍侯})uploadImg(e, props.uploadConfig.exParam).then((res) {const ids getImgUrl(res)imageListIds.value.push(ids)emit(getImgUploadIds, imageListIds.value)imageList.value imageList.value.concat(e.tempFilePaths)uni.hideLoading()})if (imageList.value.length videoList.value.length props.uploadConfig.maxCount) {VideoOfImagesShow.value false //图片上传数量和count一样时让点击拍照按钮消失}}})
}
//上传视频
function chooseVideo(index) {uni.chooseVideo({maxDuration: 60, //拍摄视频最长拍摄时间单位秒。最长支持 60 秒count: props.uploadConfig.maxCount,camera: cameraList.value[cameraIndex.value].value, //front、back默认backsourceType: sourceType[sourceTypeIndex.value],success: (e) {uni.showLoading({mask: true,title: 上传中请稍侯})uploadVideo(e, props.uploadConfig.exParam).then((res) {const ids getImgUrl(res)videoListIds.value.push(ids)emit(getVideoUploadIds, videoListIds.value)videoList.value videoList.value.concat(e.tempFilePath)uni.hideLoading()})if (imageList.value.length videoList.value.length props.uploadConfig.maxCount) {VideoOfImagesShow.value false}}})
}
//预览图片
function previewImage(e) {uni.previewImage({current: e,urls: imageList.value})
}
// 删除图片
function delect(index) {uni.showModal({title: 提示,content: 是否要删除该图片,success: (res) {if (res.confirm) {imageList.value.splice(index, 1)imageListIds.value.splice(index, 1)emit(getImgUploadIds, imageListIds.value)}if (imageList.value.length videoList.value.length props.uploadConfig.maxCount) {VideoOfImagesShow.value false} else {VideoOfImagesShow.value true}}})
}
// 删除视频
function delectVideo(index) {uni.showModal({title: 提示,content: 是否要删除此视频,success: (res) {if (res.confirm) {videoList.value.splice(index, 1)videoListIds.value.splice(index, 1)emit(getVideoUploadIds, videoListIds.value)}if (imageList.value.length videoList.value.length props.uploadConfig.maxCount) {VideoOfImagesShow.value false} else {VideoOfImagesShow.value true}}})
}
// 处理图片
function getImgUrl(arr) {const idArr []let idStr arr.forEach((item) {idArr.push(item.data.id)})idStr idArr.join(,)return idStr
}
/script
对视频和照片的尺寸进行定义。可灵活根据个人需求进行设置。
style langscss
/* 统一上传后显示的盒子宽高比 */
.box-mode {width: 20vw;height: 20vw;border-radius: 8rpx;overflow: hidden;
}.full {width: 100%;height: 100%;
}.up-page {display: flex;flex-wrap: wrap;display: flex;width: 100%;.show-box:nth-child(3n) {margin-right: 0;}.show-box {position: relative;margin-bottom: 4vw;margin-right: 4vw;extend .box-mode;.delect-icon {height: 40rpx;width: 40rpx;position: absolute;right: 0rpx;top: 0rpx;z-index: 1000;}}
}
/style以上三部分可组合为一个完整的vue组件可在父组件中使用。父组件的使用实例 FileUpload :uploadConfiguploadConfig getImgUploadIdsuploadImgIds($event) getVideoUploadIdsuploadVideoIds($event)/const uploadConfig ref({maxCount: 3,exParam: imgArr
})// 获取图片的ids
function uploadImgIds(val) {console.log(val)
}
// 获取视频的ids
function uploadVideoIds(val) {console.log(val)
}
