图片组件

package.json

@@ -23,6 +23,7 @@
     "lodash": "^4.17.11",
     "qs": "^6.7.0",
     "vue": "^2.6.10",
+    "vue-photo-preview": "^1.1.3",
     "vuex": "^3.1.1"
   },
   "devDependencies": {

src/common/UploadImg.vue

@@ -3,13 +3,16 @@
     <p class="name">{{item.name|| msg}}</p>
     <div class="box">
       <ul class="upload-imgs">
-        <li v-if="imgLen>=6 ? false : true">
+        <li v-if="imgLen>=6 ? false : true" class="uploadBox" @click="handleUpload">
           <input type="file" class="upload" @change="addImg" accept="image/*" ref="inp" style="display:none"/>
-          <p @click="handleUpload">点击上传</p>
+          <img src="../images/upload.png">
+          <p>点击上传</p>
         </li>
         <li v-for='(value, key) in imgs'>
-          <!-- <p class="img"><img :src="getObjectURL(value)"><a class="close" @click="delImg(key)">×</a></p> -->
-          <p class="img"><img :src="value"><a class="close" @click="delImg(key)">×</a></p>
+          <p class="imgbox">
+            <img :src="value" :preview="item.id" class="img" preview-text="">
+          </p>
+          <a class="close" @click="delImg(key)"></a>
         </li>
       </ul>
     </div>
@@ -25,20 +28,31 @@
         imgLen:0
       }
     },
-    props:['item'],
+    props:['item','moduleType','imgList'],//moduleType-哪个模块下上传的图
+    mounted(){
+      /*this.$preview.on('imageLoadComplete',(e,item)=>{
+        console.log(this.$preview.self)
+      })*/
+      // 将store存的值赋给imgs
+      this.imgs = this.imgList;
+    },
     methods:{
       handleUpload(){
         const inp = this.$refs.inp;
         inp.click();
       },
       delImg(key){
-        console.log(2222,key)
+        let obj = this.imgs;
+        delete(obj[key]);
+        this.imgs = Object.assign({},obj);
+        this.$store.commit('deleImg',key);
+        this.$store.commit('deleSrc',key);
       },
       addImg(){
         // 上传图片进行压缩，压缩后超过4M则不允许上传
         let fileTag = this.$refs.inp;
         let img = this.$refs.img;
-        let file = fileTag.files[0];console.log("文件信息：",file)
+        let file = fileTag.files[0];
         const that = this;
         this.imgBase64(file, function (image, canvas) {
             var maxSize = 4*1024; // 4M
@@ -50,22 +64,22 @@
               uploadSrc = canvas.toDataURL(file.type, maxSize/fileSize);
                 uploadFile = that.dataURLtoFile(uploadSrc, file.name.split('.')[0]); // 转成file文件
                 // uploadFile = that.convertBase64UrlToBlob(uploadSrc); // 转成blob
-                //console.log("大于：",uploadFile)
               } else {
                 uploadSrc = image.src; //canvas.toDataURL(file.type,0.5);
                 uploadFile = file;
               }
 
               var compressedSize = uploadFile.size / 1024 / 1024;
-              //console.log("压缩后大小：",compressedSize)
               if(compressedSize.toFixed(2) > 4.00) {
                 alert('上传图片不可超过4M');
               } else {
-                // img.setAttribute('src',uploadSrc);
-                // img.className = 'img';
                 let key = file.name + new Date().getTime();
-                this.$set(this.imgs,key,uploadSrc);
-                this.imgLen++;
+                that.$set(that.imgs,key,uploadSrc);
+                that.imgLen++;
+                // 将图片信息存到store
+                that.$store.commit('setImgFile',{type:that.moduleType,pId:that.item.id,key:key,file:uploadFile})
+                that.$store.commit('setImgSrc',{key:key,src:uploadSrc})
+                that.$previewRefresh(); //异步获取的图片需要刷新下
               }
           });
       },
@@ -99,13 +113,11 @@
             callback(image, canvas);
           };
           if (/^image/.test(file.type)) {
-            // 创建一个reader
             var reader = new FileReader();
             // 将图片将转成 base64 格式
             reader.readAsDataURL(file);
             // 读取成功后的回调
             reader.onload = function () {
-                // self.imgUrls.push(this.result);
                 // 设置src属性，浏览器会自动加载。
                 // 记住必须先绑定事件，才能设置src属性，否则会出同步问题。
                 image.src = this.result;
@@ -149,8 +161,45 @@
     }
     .upload-imgs{
       margin-bottom: .2rem;
+      .uploadBox{
+        border: 1px solid #DFE0E4;
+        box-sizing: border-box;
+        text-align: center;
+        img{
+          width:.6rem;
+          margin:.45rem 0 .23rem 0;
+        }
+      }
       li{
-        
+        width:1.9rem;
+        height:1.9rem;
+        display: inline-block;
+        position: relative;
+        vertical-align: top;
+        border-radius: .08rem;
+        margin: 0 0 .3rem .3rem;
+        .close{
+          width:.54rem;
+          height:.54rem;
+          background: url(../images/del-pic.png) no-repeat;
+          background-size: cover;
+          position: absolute;
+          top: -.27rem;
+          right: -.27rem;
+          z-index: 3;
+        }
+      }
+      li:nth-child(3n+2){
+        margin-left: 0;
+      }
+      .imgbox{
+        width:100%;
+        height:100%;
+        overflow: hidden;
+        border-radius: .08rem;
+        .img{
+          width:100%;
+        } 
       }
     }
   }

src/components/DiagTreat.vue

@@ -7,7 +7,11 @@
         <p class="quest">{{it.name}}</p>
         <span class="symp" v-for="item in it.questionMapping">{{item.name}}</span>
       </div>
-      <UploadImg v-if="it.controlType==4" :item="it"/>
+      <UploadImg v-if="it.controlType==4" 
+            :item="it" 
+            :moduleType="datas.type"
+            :imgList="imgs"
+            />
     </div>
     <div class="result">
       <p class="title">治疗情况</p>
@@ -26,7 +30,8 @@
     data(){
       return{
         msg:"诊疗情况",
-        chooseSymp:[{name:'未治疗'}]
+        chooseSymp:[{name:'未治疗'}],
+        imgs:this.$store.state.imgSrc
       }
     },
     props:['datas','preName','nextName'],

src/index.js

@@ -2,6 +2,9 @@ import Vue from 'vue';
 import router from './router.js';
 import store from './store.js';
 import App from './App.vue';
+import preview from 'vue-photo-preview';
+import 'vue-photo-preview/dist/skin.css';
+Vue.use(preview);
 Vue.config.productionTip = false;
 
 new Vue({

src/store.js

@@ -10,7 +10,9 @@ const store = new Vuex.Store({
     allMoudles:[], //模板
     originDatas:{},  //getById获取到的数据
     datas:{},  //处理过的数据
-    updata:false  //更新数据
+    updata:false,  //更新数据
+    imgFile:[],   //上传图片信息file
+    imgSrc:{},   //上传的图片信息src
   },
   mutations:{
     savePathInfo(state,param){
@@ -26,9 +28,7 @@ const store = new Vuex.Store({
       state.originDatas[param.id] = param;
     },
     setDatas(state,param){
-      // let originData = JSON.parse(JSON.stringify(state.originDatas[param.pId]));
       let originData = state.datas[param.pId]?state.datas[param.pId]:JSON.parse(JSON.stringify(state.originDatas[param.pId]));
-      // let list = deepClone(originData.questionMapping);
       let list = originData.questionMapping.slice(0);
       for(let i=0; i<originData.questionMapping.length; i++){
         if(originData.questionMapping[i].id==param.data.id){
@@ -39,7 +39,28 @@ const store = new Vuex.Store({
     },
     getUpdate(state){//更新数据
       state.updata = !state.updata;
-    }
+    },
+    setImgFile(state,param){//区别模块
+      const type = param.type;
+      state.imgFile.push(param);
+    },
+    setImgSrc(state,param){
+      const key = param.key;
+      const src = param.src;
+      state.imgSrc = Object.assign({},state.imgSrc,{[key]:src});
+    },
+    deleImg(state,param){
+      for(let i=0; i<state.imgFile.length;i++){
+        if(state.imgFile[i].key==param){
+          state.imgFile.splice(i,1)
+        }
+      }
+    },
+    deleSrc(state,param){
+      let obj = state.imgSrc;
+      delete(obj[param]);
+      state.imgSrc = Object.assign({},obj);
+    },
   }
 })