测试多图片上传带参数type

src/common/MultiLineInput.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="multipIpt">
     <span class="prefix" v-if="content.prefix">{{content.prefix}}</span>
-    <p class="sticP">
-      <input class="contentVal" :type="content.type" :placeholder="content.placeholder" v-model="val" @input="changeVal">
-    </p>
+    <div class="sticP">
+        <input class="contentVal" :type="content.type" :placeholder="content.placeholder" v-model="val" @input="changeVal">
+    </div>
     <span class="suffix" v-if="content.suffix">{{content.suffix}}</span>
   </div>
 </template>
@@ -40,7 +40,7 @@ export default {
     line-height: .74rem /* 74/100 */;
     border: 1px solid #DFE0E4;
     border-radius: .08rem /* 8/100 */;
-    padding: 0 .26rem;
+    padding: 0 .12rem 0 .26rem;
     box-sizing: border-box;
     position: relative;
     margin: .3rem 0;
@@ -52,8 +52,9 @@ export default {
       border-bottom: 1px solid #b0afaf !important;
       border-radius: 0;
       background-color: #fff;
-      padding: 0 .1rem;
-      outline-color: invert ;
+      outline-color: invert;
+      padding-left: 0.1rem;
+      box-sizing: border-box;
     }
   }
   .prefix {
@@ -62,5 +63,14 @@ export default {
   .suffix {
     position: absolute;
     right: .12rem /* 12/100 */;
+    top: 0;
+    width: 1rem;
+    text-align: right;
+  }
+  .sticP {
+    width: 100%;
+    position: relative;
+    padding-right: 1rem;
+    box-sizing: border-box;
   }
 </style>

src/common/UploadImg.vue

@@ -3,202 +3,222 @@
     <p class="name">{{item.name|| msg}}</p>
     <div class="box">
       <ul class="upload-imgs">
-        <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"/>
+        <li
+          v-if="imgLen>=6 ? false : true"
+          class="uploadBox"
+          @click="handleUpload"
+        >
+          <input
+            type="file"
+            class="upload"
+            @change="addImg"
+            accept="image/*"
+            ref="inp"
+            multiple
+            style="display:none"
+          />
           <img src="../images/upload.png">
           <p>点击上传</p>
         </li>
         <li v-for='(value, key) in imgs'>
           <p class="imgbox">
-            <img :src="value" :preview="item.id" class="img" preview-text="">
+            <img
+              :src="value"
+              :preview="item.id"
+              class="img"
+              preview-text=""
+            >
           </p>
-          <a class="close" @click="delImg(key)"></a>
+          <a
+            class="close"
+            @click="delImg(key)"
+          ></a>
         </li>
       </ul>
     </div>
   </div>
 </template>
 <script type="text/javascript">
-  export default{
-    name:'UploadImg',
-    data(){
-      return{
-        mag:"上传图片",
-        imgs:{},
-        imgLen:0
-      }
+export default {
+  name: 'UploadImg',
+  data() {
+    return {
+      mag: "上传图片",
+      imgs: {},
+      imgLen: 0
+    }
+  },
+  props: ['item', 'moduleType', 'imgList'],//moduleType-哪个模块下上传的图
+  mounted() {
+    // 将store存的值赋给imgs
+    this.imgs = this.imgList;
+  },
+  methods: {
+    handleUpload() {
+      const inp = this.$refs.inp;
+      inp.click();
     },
-    props:['item','moduleType','imgList'],//moduleType-哪个模块下上传的图
-    mounted(){
-      // 将store存的值赋给imgs
-      this.imgs = this.imgList;
+    delImg(key) {
+      let obj = this.imgs;
+      delete (obj[key]);
+      this.imgLen--;
+      this.imgs = Object.assign({}, obj);
+      this.$store.commit('deleImg', { key: key, type: this.moduleType });
+      this.$store.commit('deleSrc', { key: key, type: this.moduleType });
     },
-    methods:{
-      handleUpload(){
-        const inp = this.$refs.inp;
-        inp.click();
-      },
-      delImg(key){
-        let obj = this.imgs;
-        delete(obj[key]);
-        this.imgLen--;
-        this.imgs = Object.assign({},obj);
-        this.$store.commit('deleImg',{key:key,type:this.moduleType});
-        this.$store.commit('deleSrc',{key:key,type:this.moduleType});
-      },
-      addImg(){
-        // 上传图片进行压缩，压缩后超过4M则不允许上传
-        let fileTag = this.$refs.inp;
-        let img = this.$refs.img;
-        let file = fileTag.files[0];
-        const that = this;
-        this.imgBase64(file, function (image, canvas) {
-            var maxSize = 4*1024; // 4M
-            var fileSize = file.size/1024; //kb 图片大小
-            var uploadSrc;
-            var uploadFile;
-            if(fileSize > maxSize) { // 如果图片大小大于4m，进行压缩
-              // console.log(maxSize,fileSize, maxSize/fileSize );
-              uploadSrc = canvas.toDataURL(file.type, maxSize/fileSize);
-                uploadFile = that.dataURLtoFile(uploadSrc, file.name.split('.')[0]); // 转成file文件
-                // uploadFile = that.convertBase64UrlToBlob(uploadSrc); // 转成blob
-              } else {
-                uploadSrc = image.src; //canvas.toDataURL(file.type,0.5);
-                uploadFile = file;
-              }
+    addImg() {
+      // 上传图片进行压缩，压缩后超过4M则不允许上传
+      let fileTag = this.$refs.inp;
+      let img = this.$refs.img;
+      let file = fileTag.files[0];
+      const that = this;
+      this.imgBase64(file, function (image, canvas) {
+        var maxSize = 4 * 1024; // 4M
+        var fileSize = file.size / 1024; //kb 图片大小
+        var uploadSrc;
+        var uploadFile;
+        if (fileSize > maxSize) { // 如果图片大小大于4m，进行压缩
+          // console.log(maxSize,fileSize, maxSize/fileSize );
+          uploadSrc = canvas.toDataURL(file.type, maxSize / fileSize);
+          uploadFile = that.dataURLtoFile(uploadSrc, file.name.split('.')[0]); // 转成file文件
+          // uploadFile = that.convertBase64UrlToBlob(uploadSrc); // 转成blob
+        } else {
+          uploadSrc = image.src; //canvas.toDataURL(file.type,0.5);
+          uploadFile = file;
+        }
 
-              var compressedSize = uploadFile.size / 1024 / 1024;
-              if(compressedSize.toFixed(2) > 4.00) {
-                alert('上传图片不可超过4M');
-              } else {
-                let key = file.name + new Date().getTime();
-                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,type:that.moduleType})
-                that.$previewRefresh(); //异步获取的图片需要刷新下
-              }
-          });
-      },
-      imgBase64(file, callback) {
-        var self = this;
-        // 看支持不支持FileReader
-        if (!file || !window.FileReader) return;
-        // 创建一个 Image 对象
-        var image = new Image();
-        // 绑定 load 事件处理器，加载完成后执行
-        image.onload = function(){
-            // 获取 canvas DOM 对象
-            var canvas = document.createElement('canvas')
-            // 返回一个用于在画布上绘图的环境, '2d' 指定了您想要在画布上绘制的类型
-            var ctx = canvas.getContext('2d')
-            // 如果高度超标 // 参数，最大高度
-            var MAX_HEIGHT = 3000;
-            if(image.height > MAX_HEIGHT) {
-                // 宽度等比例缩放 *=
-                image.width *= MAX_HEIGHT / image.height;
-                image.height = MAX_HEIGHT;
-              }
-            // 获取 canvas的 2d 环境对象,
-            // canvas清屏
-            ctx.clearRect(0, 0, canvas.width, canvas.height);
-            // 重置canvas宽高
-            canvas.width = image.width;
-            canvas.height = image.height;
-            // 将图像绘制到canvas上
-            ctx.drawImage(image, 0, 0, image.width, image.height);
-            callback(image, canvas);
-          };
-          if (/^image/.test(file.type)) {
-            var reader = new FileReader();
-            // 将图片将转成 base64 格式
-            reader.readAsDataURL(file);
-            // 读取成功后的回调
-            reader.onload = function () {
-                // 设置src属性，浏览器会自动加载。
-                // 记住必须先绑定事件，才能设置src属性，否则会出同步问题。
-                image.src = this.result;
-              }
-            }
-          },
-      // 将以base64的图片url数据转换为Blob
-      convertBase64UrlToBlob(urlData) {
-        var bytes = window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte
-        //处理异常,将ascii码小于0的转换为大于0
-        var ab = new ArrayBuffer(bytes.length);
-        var ia = new Uint8Array(ab);
-        for (var i = 0; i < bytes.length; i++) {
-          ia[i] = bytes.charCodeAt(i);
+        var compressedSize = uploadFile.size / 1024 / 1024;
+        if (compressedSize.toFixed(2) > 4.00) {
+          alert('上传图片不可超过4M');
+        } else {
+          let key = file.name + new Date().getTime();
+          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, type: that.moduleType })
+          that.$previewRefresh(); //异步获取的图片需要刷新下
+        }
+      });
+    },
+    imgBase64(file, callback) {
+      var self = this;
+      // 看支持不支持FileReader
+      if (!file || !window.FileReader) return;
+      // 创建一个 Image 对象
+      var image = new Image();
+      // 绑定 load 事件处理器，加载完成后执行
+      image.onload = function () {
+        // 获取 canvas DOM 对象
+        var canvas = document.createElement('canvas')
+        // 返回一个用于在画布上绘图的环境, '2d' 指定了您想要在画布上绘制的类型
+        var ctx = canvas.getContext('2d')
+        // 如果高度超标 // 参数，最大高度
+        var MAX_HEIGHT = 3000;
+        if (image.height > MAX_HEIGHT) {
+          // 宽度等比例缩放 *=
+          image.width *= MAX_HEIGHT / image.height;
+          image.height = MAX_HEIGHT;
+        }
+        // 获取 canvas的 2d 环境对象,
+        // canvas清屏
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        // 重置canvas宽高
+        canvas.width = image.width;
+        canvas.height = image.height;
+        // 将图像绘制到canvas上
+        ctx.drawImage(image, 0, 0, image.width, image.height);
+        callback(image, canvas);
+      };
+      if (/^image/.test(file.type)) {
+        var reader = new FileReader();
+        // 将图片将转成 base64 格式
+        reader.readAsDataURL(file);
+        // 读取成功后的回调
+        reader.onload = function () {
+          // 设置src属性，浏览器会自动加载。
+          // 记住必须先绑定事件，才能设置src属性，否则会出同步问题。
+          image.src = this.result;
         }
-        return new Blob([ab], {type: 'image/jpg'});
-      },
-      // 将以base64的图片url数据转换为file
-      dataURLtoFile(dataurl, filename) { //将base64转换为文件
-        var arr = dataurl.split(','),
+      }
+    },
+    // 将以base64的图片url数据转换为Blob
+    convertBase64UrlToBlob(urlData) {
+      var bytes = window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte
+      //处理异常,将ascii码小于0的转换为大于0
+      var ab = new ArrayBuffer(bytes.length);
+      var ia = new Uint8Array(ab);
+      for (var i = 0; i < bytes.length; i++) {
+        ia[i] = bytes.charCodeAt(i);
+      }
+      return new Blob([ab], { type: 'image/jpg' });
+    },
+    // 将以base64的图片url数据转换为file
+    dataURLtoFile(dataurl, filename) { //将base64转换为文件
+      var arr = dataurl.split(','),
         mime = arr[0].match(/:(.*?);/)[1],
         bstr = atob(arr[1]),
         n = bstr.length,
         u8arr = new Uint8Array(n);
-        while (n--) {
-          u8arr[n] = bstr.charCodeAt(n);
-        }
-        return new File([u8arr], filename, {type: mime});
-      },
+      while (n--) {
+        u8arr[n] = bstr.charCodeAt(n);
+      }
+      return new File([u8arr], filename, { type: mime });
+    },
 
-    }
   }
+}
 </script>
 <style lang="less" scoped>
-  .img-wrap{
-    font-size: .3rem;
-    .name{
-      color: #000;
-      margin-bottom: .36rem;
-      font-weight: 700;
-    }
-    .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.86rem;
-        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;
-        }
+.img-wrap {
+  font-size: 0.3rem;
+  .name {
+    color: #000;
+    margin-bottom: 0.36rem;
+    font-weight: 700;
+  }
+  .upload-imgs {
+    margin-bottom: 0.2rem;
+    .uploadBox {
+      border: 1px solid #dfe0e4;
+      box-sizing: border-box;
+      text-align: center;
+      img {
+        width: 0.6rem;
+        margin: 0.45rem 0 0.23rem 0;
       }
-      li:nth-child(3n+1){
-        margin-left: 0;
+    }
+    li {
+      width: 1.86rem;
+      height: 1.9rem;
+      display: inline-block;
+      position: relative;
+      vertical-align: top;
+      border-radius: 0.08rem;
+      margin: 0 0 0.3rem 0.3rem;
+      .close {
+        width: 0.54rem;
+        height: 0.54rem;
+        background: url(../images/del-pic.png) no-repeat;
+        background-size: cover;
+        position: absolute;
+        top: -0.27rem;
+        right: -0.27rem;
+        z-index: 3;
       }
-      .imgbox{
-        width:100%;
-        height:100%;
-        overflow: hidden;
-        border-radius: .08rem;
-        .img{
-          width:100%;
-        } 
+    }
+    li:nth-child(3n + 1) {
+      margin-left: 0;
+    }
+    .imgbox {
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+      border-radius: 0.08rem;
+      .img {
+        width: 100%;
       }
     }
   }
+}
 </style>

src/components/Preview.vue

@@ -19,77 +19,99 @@
       主诉
     </div>
     <div class="foot">
-      <span class="back" @click="back">{{'返回'+ preName}}</span>
-      <span class="next">提 交</span>
+      <span
+        class="back"
+        @click="back"
+      >{{'返回'+ preName}}</span>
+      <span
+        class="next"
+        @click="saveAllDate"
+      >提 交</span>
     </div>
   </div>
 </template>
 <script>
+import api from '@utils/api.js';
 export default {
-  props:['preName'],
-  data(){
-    const {pathInfo,originDatas} = this.$store.state;
+  props: ['preName'],
+  data() {
+    const { pathInfo, originDatas } = this.$store.state;
+    let diagnoseDate = this.$store.state.diagnose;
     return {
-      msg:'预览',
-      pathInfo:pathInfo,
+      msg: '预览',
+      pathInfo: pathInfo,
+      diagnose: diagnoseDate
     }
   },
-  methods:{
-    back(){
-      this.$emit('back','preview')
+
+  methods: {
+    back() {
+      this.$emit('back', 'preview')
+    },
+    saveAllDate() {
+      let formData = new FormData();
+      let imgList = this.diagnose.imgFile
+      for(let i = 0;i < imgList.length;i++){
+        let pageFile = imgList[i].file
+        formData.append('upfiles', imgList[i].file);
+        formData.append('type', i+1);
+      }
+      api.uploadImageThums(formData).then((res) => {
+        console.log(res)
+      })
     }
   }
 }
 </script>
 <style lang="less" scoped>
-  @import "../less/base.less";
-  .foot{
-    .dbfooter;
+@import "../less/base.less";
+.foot {
+  .dbfooter;
+}
+.preview {
+  color: red;
+  background-color: #f2f2f5;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  padding: 0.3rem 0.4rem;
+}
+.personMsg {
+  padding: 0.3rem 0.4rem;
+  box-sizing: border-box;
+  background-color: #fff;
+  border-radius: 0.16rem;
+  margin-bottom: 0.38rem;
+  .baseMsg {
+    font-size: 0.32rem;
+    color: #000000;
+    letter-spacing: 0;
+    text-align: justify;
+    font-weight: bold;
+    margin-bottom: 0.13rem;
   }
-  .preview {
-    color: red;
-    background-color: #F2F2F5;
-    position: fixed;
+  table {
     width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    box-sizing: border-box;
-    padding: .3rem /* 30/100 */ .4rem /* 40/100 */;
-  }
-  .personMsg {
-    padding: .3rem /* 30/100 */ .4rem /* 40/100 */;
-    box-sizing: border-box;
-    background-color: #fff;
-    border-radius: .16rem /* 16/100 */;
-    margin-bottom: .38rem /* 38/100 */;
-    .baseMsg {
-      font-size: .32rem /* 32/100 */;
-      color: #000000;
-      letter-spacing: 0;
-      text-align: justify;
-      font-weight: bold;
-      margin-bottom: .13rem;
+    font-size: 0.26rem;
+    color: #333333;
+    letter-spacing: 0;
+    text-align: justify;
+    line-height: 0.44rem /* 44/100 */;
+    td.fst {
+      width: 40%;
     }
-    table {
-      width: 100%;
-      font-size: .26rem;
-      color: #333333;
-      letter-spacing: 0;
-      text-align: justify;
-      line-height: .44rem /* 44/100 */;
-      td.fst {
-        width: 40%;
-      }
-      td.sec {
-        width: 60%;
-      }
-    }
-    .line {
-      opacity: 0.3;
-      background: #D8D8D8;
-      margin: .2rem 0;
-      height: 1px;
+    td.sec {
+      width: 60%;
     }
   }
+  .line {
+    opacity: 0.3;
+    background: #d8d8d8;
+    margin: 0.2rem 0;
+    height: 1px;
+  }
+}
 </style>

src/components/Symptom.vue

@@ -84,7 +84,7 @@ import Toast from '../common/Toast.vue';
       },
       toNext(){
         // 把1切换成完成图标，且2高亮
-        if(this.chooseSymp.length==0){return}
+        // if(this.chooseSymp.length==0){return}
         this.$emit('next');
         // 把症状情况的数据存起-已选、详情、拼好的文字
         

src/less/index.less

@@ -1,4 +1,4 @@
- @import './base.less';
+@import './base.less';
 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, input, textarea, p, th, td, hr, button {
   margin: 0;
   padding: 0;
@@ -104,4 +104,4 @@ html{
     .main .mainBtm .Recommend .btn {
       padding: 0 10px !important;
     }
-} */
+} */ 

src/utils/api.js

@@ -8,6 +8,10 @@ const urls = {
   getSymptom:'/api/prec/questionUsual/getQuestionUsual',//常用症状
   getById:'/api/prec/questionInfo/getById',//常标签详情
   push:'/api/prec/push/pushInner',//症状推送
+  saveInquiry:'/api/prec/inquiryInfo/saveInquiry',//保存问诊记录
+  uploadImage:'/api/prec/file/uploadImage',//单个文件上传同时生成缩略图
+  uploadImageThums:'/api/prec/file/uploadImageThums',//多个文件上传同时生成缩略图
+  // uploadImageThums:'http://192.168.3.1:8849/file/uploadImageThums',//多个文件上传同时生成缩略图
 }
 
 export default {
@@ -32,4 +36,10 @@ export default {
   getPush(param){
     return axios.post(urls.push,param)
   },
+  uploadImageThums(param){
+    return axios.post(urls.uploadImageThums,param)
+  },
+  uploadImage(param){
+    return axios.post(urls.uploadImage,param)
+  },
 }

src/utils/tools.js

@@ -17,6 +17,7 @@ const deepClone = (arr) =>{
 }
 
 const getModelExpStr = (str) =>{
+  // str = '${number_}'
   let matchStr = str.match(/\${number_(.*})/)[0]
   let result = {}
   if(matchStr){//数字输入框

webpack.dev.js

@@ -8,8 +8,9 @@ module.exports = merge(common,{
   mode: 'development',
   devtool: "inline-source-map",
   devServer: {
-    // contentBase:'./dist',
+    contentBase:'./dist',
     port:'8082',
+    host:'192.168.3.126',
     openPage:'?hospitalCode=A001&hospitalDeptCode=D01&doctorCode=YS001&patientCode=1600&recordId=44',//携带参数
     proxy:{
       '/api':{