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

guoshilong

2022-10-11 0ecb01b6307a1b1db442d1a29c5c5d0eeb48c18b

 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>