宅基地调查

src/views/homesteadSurvey/add.vue

@@ -295,7 +295,7 @@
           </van-field>
           <van-field name="uploader" label="宅基地现场照片" autocomplete="off">
             <template #input>
-              <van-uploader v-model="fileListzjd" :after-read="beforeReadzjd"  @delete="deleteFilezjd" :max-count="20"></van-uploader>
+              <van-uploader v-model="fileListzjd" :after-read="beforeReadzjd" multiple @delete="deleteFilezjd" :max-count="20"></van-uploader>
             </template>
           </van-field>
           <van-field
@@ -3720,48 +3720,98 @@
       },
       // 图片上传前
       beforeReadzjd(file){
-        // 创建Canvas对象(画布)
-        let canvas =  document.createElement('canvas')
-        // 获取对应的CanvasRenderingContext2D对象(画笔)
-        let context = canvas.getContext('2d')
-        // 创建新的图片对象
-        let img = new Image()
-        // 指定图片的DataURL(图片的base64编码数据)
-        img.src = file.content
-        // 监听浏览器加载图片完成，然后进行进行绘制
-        const height = 166
-        const width = 316
-        img.onload = () => {
-          const h = img.height
-          const w = img.width
-          let ch = img.height/1
-          let cw = img.width/1
-          let canvas = document.createElement('canvas')
-          let ctx = canvas.getContext('2d')
-          canvas.height = ch
-          canvas.width = cw
-          ctx.clearRect(0,0,cw,ch)
-          ctx.drawImage(img,0,0,cw,ch)
-          let base_img = canvas.toDataURL('image/jpeg')
-          const blobBin = atob(base_img.split(',')[1])
-          let d = []
-          for (let i=0;i<blobBin.length;i++){
-            d.push(blobBin.charCodeAt(i))
-          }
-          const data2 = new FormData();
-          data2.append("file", new Blob([new Uint8Array(d)],{type:'image/jpeg'}));
-          if(this.$cookies.get("upload")==null||this.$cookies.get("upload")==0){
-            uploadFile(data2).then(res => {
-            if(this.form.zjdxctp!=null&&this.form.zjdxctp!=""){
-              this.form.zjdxctp = this.form.zjdxctp + "," + res.fileName
-            }else{
-              this.form.zjdxctp =  res.fileName
+        let _this = this
+        if(file.length!=undefined){
+          file.map(res => {
+            // 创建Canvas对象(画布)
+            let canvas =  document.createElement('canvas')
+            // 获取对应的CanvasRenderingContext2D对象(画笔)
+            let context = canvas.getContext('2d')
+            // 创建新的图片对象
+            let img = new Image()
+            // 指定图片的DataURL(图片的base64编码数据)
+            img.src = res.content
+            // 监听浏览器加载图片完成，然后进行进行绘制
+            const height = 166
+            const width = 316
+            img.onload = () => {
+              const h = img.height
+              const w = img.width
+              let ch = img.height/1
+              let cw = img.width/1
+              let canvas = document.createElement('canvas')
+              let ctx = canvas.getContext('2d')
+              canvas.height = ch
+              canvas.width = cw
+              ctx.clearRect(0,0,cw,ch)
+              ctx.drawImage(img,0,0,cw,ch)
+              let base_img = canvas.toDataURL('image/jpeg')
+              const blobBin = atob(base_img.split(',')[1])
+              let d = []
+              for (let i=0;i<blobBin.length;i++){
+                d.push(blobBin.charCodeAt(i))
+              }
+              const data2 = new FormData();
+              data2.append("file", new Blob([new Uint8Array(d)],{type:'image/jpeg'}));
+              if(this.$cookies.get("upload")==null||this.$cookies.get("upload")==0){
+                uploadFile(data2).then(response => {
+                  if(_this.form.zjdxctp!=null&&_this.form.zjdxctp!=""){
+                    _this.form.zjdxctp = _this.form.zjdxctp + "," + response.fileName
+                  }else{
+                    _this.form.zjdxctp =  response.fileName
+                  }
+                })
+              }else{
+                _this.saveBlobAsFile(new Blob([new Uint8Array(d)],{type:'image/jpeg'}),_this.form.zjddm)
+              }
             }
           })
-          }else{
-            this.saveBlobAsFile(new Blob([new Uint8Array(d)],{type:'image/jpeg'}),this.form.zjddm)
+        }
+        else{
+          // 创建Canvas对象(画布)
+          let canvas =  document.createElement('canvas')
+          // 获取对应的CanvasRenderingContext2D对象(画笔)
+          let context = canvas.getContext('2d')
+          // 创建新的图片对象
+          let img = new Image()
+          // 指定图片的DataURL(图片的base64编码数据)
+          img.src = file.content
+          // 监听浏览器加载图片完成，然后进行进行绘制
+          const height = 166
+          const width = 316
+          img.onload = () => {
+            const h = img.height
+            const w = img.width
+            let ch = img.height/1
+            let cw = img.width/1
+            let canvas = document.createElement('canvas')
+            let ctx = canvas.getContext('2d')
+            canvas.height = ch
+            canvas.width = cw
+            ctx.clearRect(0,0,cw,ch)
+            ctx.drawImage(img,0,0,cw,ch)
+            let base_img = canvas.toDataURL('image/jpeg')
+            const blobBin = atob(base_img.split(',')[1])
+            let d = []
+            for (let i=0;i<blobBin.length;i++){
+              d.push(blobBin.charCodeAt(i))
+            }
+            const data2 = new FormData();
+            data2.append("file", new Blob([new Uint8Array(d)],{type:'image/jpeg'}));
+            if(_this.$cookies.get("upload")==null||_this.$cookies.get("upload")==0){
+              uploadFile(data2).then(res => {
+                if(_this.form.zjdxctp!=null&&_this.form.zjdxctp!=""){
+                  _this.form.zjdxctp = _this.form.zjdxctp + "," + res.fileName
+                }else{
+                  _this.form.zjdxctp =  res.fileName
+                }
+              })
+            }else{
+              _this.saveBlobAsFile(new Blob([new Uint8Array(d)],{type:'image/jpeg'}),_this.form.zjddm)
+            }
           }
         }
+
       },
       blobToBase64(blob) {
         return new Promise((resolve, reject) => {

src/views/homesteadSurvey/list.vue

@@ -22,7 +22,7 @@
           <p style="color:#000;position:absolute;top:0.426667rem;left:0.426667rem">图片上传</p>
           <div style="width:100%;height:calc( 40vh - 100px);overflow-y: scroll;">
 
-            <van-uploader v-model="uploadImgList" :after-read="beforeReadImageList" @delete="deleteFileImageList" multiple :max-count="50"  style/>
+            <van-uploader v-model="uploadImgList" :after-read="beforeReadImageList" @delete="deleteFileImageList" multiple :max-count="50"  />
           </div>
           <van-row justify="space-around" style=" position:fixed;bottom:0;left:0;width:100%;height:50px;text-align: center;">
             <van-col span="12"><van-button type="primary" style="width:100px;" round  @click="uploadImgList = [],uploadImgList1 = []">清空</van-button></van-col>