事件上报图片显示回显，可预览

guoshilong

2022-10-11 0ecb01b6307a1b1db442d1a29c5c5d0eeb48c18b

事件上报图片显示回显，可预览

 components/evan-upload/evan-upload.vue

@@ -243,7 +243,7 @@
        // 图片的预览的键（默认 thumbnail）
        imgCoverKey: {
            type: String,
            default: 'http://dev.jxpskj.com:9000/zhnc/upload/20220923/66713609576bbaa24a2f87145a3134c6.jpeg'
            default: "thumbnail"
        },
        // 图片限制
        imgLimit: {

 pages/eventgm/eventsReported.vue

@@ -43,15 +43,17 @@
            >
            </u-action-sheet> -->
            
            <u-form-item label-position="top" label-width="25%" label="图片上传:">
            <u-form-item label-position="top" label-width="25%" label="图片视频上传:">
                <evan-upload ref="evanUpload" 
                :usePreview="true" 
                :imgLimit="4" 
                :format="format"
                :options="uploadOption" 
                @on-upload="onUpload" 
                @on-pre-video="onPreVideo"
            ></evan-upload>
                @on-upload="onUpload" 
                ></evan-upload>
            </u-form-item>
			
            <video v-if="videoShow" :src="videoUrl"></video>
            
            <u-form-item label-position="top" label="备注:">
                <u-input v-model="form.remark" type="textarea" />
@@ -78,8 +80,8 @@
            form: {
                title:"",
                address:"章贡区",
                longitude:"",
                latitude:"",
                longitude:"116.4",
                latitude:"39.9",
                type:"",
                typeText:"",
                state:"",
@@ -114,6 +116,8 @@
                header:{},
            },
            uploadList:[],
            videoUrl:"",
            videoShow:false,
            showType:false,
            typeList:[],
            showState:false,
@@ -217,7 +221,7 @@
                if (valid) {
                    if(this.uploadList.length>0){
                        this.uploadList.forEach(e=>{
                            var res = JSON.parse(e.url)
                            var res = JSON.parse(e.res)
                            this.form.picUrls.push({
                                label:res.data.name,
                                value:res.data.link
@@ -238,22 +242,26 @@
        },
        onUpload(res){
            this.uploadList = res.data
            if(this.$refs.evanUpload.imgArr.length>0){
                this.$refs.evanUpload.imgArr.forEach(e=>{
                    var res = JSON.parse(e.url)
                    e.thumbnail = res.data.link
                })
            }
			
            if(this.$refs.evanUpload.videoArr.length>0){
                this.$refs.evanUpload.videoArr.forEach(e=>{
                    var res = JSON.parse(e.url)
                    e.thumbnail = res.data.link
                })
            }
        },
        onPreVideo(res){
        }
        //对返回的数据进行处理
        format(res){
            var myRes = JSON.parse(res.url)
            var fileType = myRes.data.originalName.split(".")[1]
            var thumbnail = myRes.data.link
            var url = res.url
            res = {}
            res.fileType = fileType
            res.thumbnail = thumbnail
            res.url = thumbnail
            res.res = url
            res.imgCoverKey = thumbnail
            return res
        },
        onPreVideo(video){
            // console.log(video)
            // this.videoShow = true
            this.videoUrl = video.url
        },
    }
};
</script>