uni 拍照上传拍视频上传以及相册

拍照拍视频

<template>
	<view class="content-pages">
		<NavbarFull title="拍照" :color="navBarColor" :bgcolor="navBarBgColor" :opacity="navBarOpacity" leftIcon="back"
			@back="back" />
      <div class="content-box">
          <uni-forms
      ref="form"
      label-position="top"
      :rules="rules"
      :modelValue="params"
      label-width="100%"
    >
      <uni-forms-item label="备注" name="supplementRemark">
        <uni-easyinput
          type="textarea"
          v-model="params.supplementRemark"
          placeholder="请输入"
        />
      </uni-forms-item>
      <uni-forms-item label="图片" name="images">
        <h5Img
          v-model="params.images"
          :limit="9"
          tips="支持扩展名：jpg、jpeg、gif、png，最多支持9张图片"
        />
      </uni-forms-item>
      <uni-forms-item label="视频" name="videos">
        <h5Video
          v-model="params.videos"
          :limit="3"
          tips="支持扩展名：mp4，最多支持3个视频"
        />
      </uni-forms-item>
    </uni-forms>    
      </div>
		<view class="row-gap-6"></view>
		<view class="submit-btn-box">
			<button class="btn" type="default" @click="back">取消</button>
			<button class="btn" type="primary" @click="submit">提交</button>
		</view>
		<view class="row-gap-30"></view>
	</view>
</template>

<script>
	import NavbarFull from "@/components/navbar/main.vue";
  import h5Img from "@/components/upload/h5-img";
  import h5Video from "@/components/upload/h5-video";
  import {
   
   deleteFishPondSupplement,addFishPondSupplement } from "@/api/breed/pond";
	import {
   
   
		rules,
		params
	} from "./data";
	import {
   
   
		getInfo,
		checkUpdate,
		addEnterprise,
		editEnterprise
	} from "@/api/system/subject";
	import {
   
   
		breedDropDown
	} from "@/api/system/breed";
	export default {
   
   
		components: {
   
   
			NavbarFull,
      h5Img,
      h5Video,
		},
		data() {
   
   
			return {
   
   
				navBarOpacity: 0,
				navBarBgColor: "rgba(255, 255, 255,0)",
				navBarColor: "rgb(255, 255, 255)",
				keyword: "",
				rules: rules,
				params: {
   
   
					...params
				},
				detail: "",
				breedList: [],
				userInfo: {
   
   },
				addSubjectId: '',
				enterpriseName: '',
        pondId:'',
			};
		},
		onPageScroll({
    
    
			scrollTop
		}) {
   
   
			const max = 60;
			if (scrollTop < max) {
   
   
				const num = scrollTop / max;
				const c = 255 - parseInt((255 - 51) * num);
				this.navBarColor = `rgb(${
     
     c}, ${
     
     c}, ${
     
     c})`;
				this.navBarBgColor = `rgba(255, 255, 255,${
     
     num})`;
				this.navBarOpacity = num.toFixed(3);
			} else {
   
   
				this.navBarColor = "rgb(51, 51, 51)";
				this.navBarBgColor = "rgba(255, 255, 255,1)";
				this.navBarOpacity = 1;
			}
		},
			async onLoad(options) {
   
   
        // console.log(options.data);
        console.log('this.pondId-**-*-*-*-*-',options)
		    // const params = options.data ? JSON.parse(decodeURIComponent(options.data)) : {};
        // console.log( JSON.parse(options.data));
        this.pondId =options.id
		},
    
		methods: {
   
   
			init() {
   
   
				this.userInfo = uni.getStorageSync("userInfo");
				if (uni.getStorageSync("addSubjectId")) {
   
   
					this.addSubjectId = uni.getStorageSync("addSubjectId")
				}
				if (uni.getStorageSync("addSubjectName")) {
   
   
					this.enterpriseName = uni.getStorageSync("addSubjectName")
				}
				if (this.userInfo.subjectId) {
   
   
					this.getInfo(this.userInfo.subjectId);
				}
				
				this.$refs.base && this.$refs.base.init(data);
			},
			initDetail() {
   
   
				const data = JSON.parse(this.detail);
				this.$refs.base && this.$refs.base.init(data);
			},
			async getInfo(id) {
   
   
				try {
   
   
					const {
   
   
						code,
						data
					} = await getInfo(id);
					if (code === "200") {
   
   
						this.detail = JSON.stringify(data);
						this.breedList = [];
						this.breedDropDown(data.projectId);
						this.initDetail();
					}
				} catch (error) {
   
   }
			},
			async breedDropDown(projectId) {
   
   
				try {
   
   
					const {
   
   
						code,
						data
					} = await breedDropDown({
   
   
						projectId
					});
					if (code === "200" && Array.isArray(data)) {
   
   
						data.forEach((item) => {
   
   
							item.breedId = item.id;
						});
						this.breedList = data;
					} else {
   
   
						this.breedList = [];
					}
				} catch (error) {
   
   
					this.breedList = [];
				}
			},
		async	submit() {
   
   
						console.log(params, '提交中')
						let obj = this.params;
            let arr= [],arr1 = []
            this.params.videos.map(item => arr.push(item.uuid))
            this.params.images.map(item => arr1.push(item.id))
						const data = {
   
   
              pondId:this.pondId,
              videos:arr,
              images:arr1,
              supplementRemark:obj.supplementRemark,
						}
            console.log(data);
						const result = await addFishPondSupplement(data);
						console.log(result, '已提交')
						if (result.code === "200") {
   
   
							uni.hideLoading();
              this.back()
							// uni.reLaunch({
   
   
							// 	url: '/pages/center/index',
							// 	success() {
   
   
							// 		uni.showToast({
   
   
							// 			title: result.message,
							// 			mask: true
							// 		});
							// 	}
							// })
							// this.$refs.base.resetFieldForm();
						} else {
   
   
							console.log(result, '已提交')
							uni.hideLoading();
							uni.showToast({
   
   
								title: result.message,
								icon: "none",
							});
						}
					
			},
			back() {
   
   
			uni.navigateBack();
		},
			go(path) {
   
   
				uni.navigateTo({
   
   
					url: path,
				});
			},
		},
	};
</script>

<style lang="scss">
	@import "./style.scss";
</style>

h5-img.vue

<template>
  <view class="video-upload-box" :data-tips="tips">
    <view class="video-list">
      <view
        class="video-item-box"
        v-for="(item, index) in list"
        :key="item.key"
      >
        <view class="video-item">
          <view class="icon-del-box" @click