移动端 调用摄像头图库 图片上传

移动端 调用摄像头图库 图片上传
<template>
  <div id="imageUpload">
    <sur-header :headInfo="headInfo"></sur-header>
    <div class="main">
      <!-- 查看照片 -->
      <div class="itemList" @click="showTargetList(0)">
          <div class="upTitle">
            <div class="upTitleLeft">
               <img  src='/static/image/survey.png'>
              <span>{{certifyPics.checkMedia.mediaKindName}}</span>
            </div>
            <span class="upTitleRight"></span>
          </div>
          <div class="imgBox">
              <div
                v-if="certifyPics.checkMedia.imageArr.length>0"
                v-for="(i,key) in certifyPics.checkMedia.imageArr"
                :key="key" @click.stop="actionSheet('checkMedia',key)"
                >
                <img :src="i.src" alt="">
                <p>查勘照片</p>
              </div>
              <div  @click.stop="actionSheet('checkMedia'),(-1)">
                <img :src="hold" alt="">
                <p>其他照片</p>
              </div>
          </div>
      </div>
      <!-- 车辆损失 -->
      <div class="itemList" @click="showTargetList(1)">
          <div class="upTitle">
            <div class="upTitleLeft">
              <img src='/static/image/carLoss.png'>
              <span>{{certifyPics.carLossMedia.mediaKindName}}</span>
            </div>
            <span class="upTitleRight"></span>
          </div>
          <div class="imgBox" >
            <div  @click.stop="actionSheet('carLossMedia',key)"
              v-if="certifyPics.carLossMedia.imageArr.length>0"
              v-for="(i,key) in certifyPics.carLossMedia.imageArr"
              :key="key">
              <img :src='i.src' alt="">
              <p>{{i.mediaKindName}}</p>
            </div>
            <div  @click.stop="actionSheet('carLossMedia'),(-1)">
              <img :src="hold" alt="">
              <p>其他照片</p>
            </div>
          </div>
      </div>
      <!-- 财务损失 -->
      <div class="itemList" @click="showTargetList(2)">
          <div class="upTitle">
            <div class="upTitleLeft">
              <img  src='/static/image/moneyLoss.png'>
              <span>{{certifyPics.propLossMedia.mediaKindName}}</span>
            </div>
            <span class="upTitleRight"></span>
          </div>
          <div class="imgBox">
            <div v-if="certifyPics.propLossMedia.imageArr.length>0"
              v-for="(i,key) in certifyPics.propLossMedia.imageArr"
              :key="key" @click.stop="actionSheet('propLossMedia',key)">
              <img :src='i.src' alt="">
              <p>{{i.mediaKindName}}</p>
            </div>
            <div  @click.stop="actionSheet('propLossMedia'),(-1)">
              <img :src="hold" alt="">
              <p>其他照片</p>
            </div>
          </div>
      </div>
      <!-- 人伤跟踪 -->
      <div class="itemList" @click="showTargetList(3)">
          <div class="upTitle">
            <div class="upTitleLeft">
              <img  src='/static/image/peopleloss.png'>
              <span>{{certifyPics.personLossMedia.mediaKindName}}</span>
            </div>
            <span class="upTitleRight"></span>
          </div>
          <div class="imgBox">
            <div
              @click.stop="actionSheet('personLossMedia',key)"
              v-if="certifyPics.personLossMedia.imageArr.length>0"
              v-for="(i,key) in certifyPics.personLossMedia.imageArr"
              :key="key">
              <img :src='i.src' alt="">
              <p>{{i.mediaKindName}}</p>
            </div>
            <div   @click.stop="actionSheet('personLossMedia'),(-1)">
              <img :src="hold" alt="">
              <p>其他照片</p>
            </div>
          </div>
      </div>
      <!-- 其他照片 -->
      <div class="itemList" @click="showTargetList(4)">
          <div class="upTitle">
            <div class="upTitleLeft">
              <img src='/static/image/otherImage.png' alt="">
              <span>{{certifyPics.elseMedia.mediaKindName}}</span>
            </div>
            <span class="upTitleRight"></span>
          </div>
          <div class="imgBox">
            <div v-if="certifyPics.elseMedia.imageArr.length>0"
              v-for="(i,key) in certifyPics.elseMedia.imageArr"
              :key="key" @click.stop="actionSheet('elseMedia'),key">
              <img :src='i.src' alt="">
              <p>{{i.mediaKindName}}</p>
            </div>
            <div  @click.stop="actionSheet('elseMedia'),(-1)">
              <img :src="hold" alt="">
              <p>其他照片</p>
            </div>
          </div>
      </div>
      <!-- 拍照、相册、取消 -->
      <mt-actionsheet      :actions="actions"      v-model="sheetVisible">    </mt-actionsheet>
      <form id="uploadImageForm" v-show="false">
        <input class="file" name="file" type="file" id="uploadImageInput" accept="image" @change="loadPic"/>
         <input type="submit" value="提交">
      </form>
    </div>
     <!-- 提交 -->
      <button class="mainbtn" @click="confirmCertifys()">确认提交</button>
  </div>
</template>
<script>
import surHeader from "@/components/header/Header";
import { Actionsheet } from "mint-ui";
export default {
  data() {
    return {
      headInfo: {
        title: "现场拍照",
        type: "back"
      },
      comCode:"",
      username:"",
      uploader: "",
      hold: "/static/image/hold.png",
      currUploadCertifyCode: "",
      key:"",
      sourceFrom: "zyappClaim",
      registNo: "",
      certifyPics: {
        checkMedia: {
          mediaKindName: "查勘照片",
          fileDesc: "查勘照片",
          mediaKind: "checkMedia",
          zyicBusinessCode: "CLD202",
          uploader: "",
          imageArr: []
        },
        carLossMedia: {
          mediaKindName: "车辆损失照片",
          fileDesc: "车辆损失照片",
          mediaKind: "carLossMedia",
          zyicBusinessCode: "CLD504",
          imageArr: [
            {
              src: "/static/image/hold.png",
              registNo: "",
              uploader: "",
              sourceFrom: "zyappClaim",
              mediaType: "",
              mediaSize: 0,
              insertTime: "",
              validate: "1",
              fileName: "",
              origFileName: "",
              mediaKind: "carLossMedia",
              mediaKindName: "车辆侧前方",
              uploadToZyic: "0",
              zyicBusinessCode: "CLD504",
              fileDesc: "车辆损失照片"
            },
            {
              src: "/static/image/hold.png",
              registNo: "",
              uploader: "",
              sourceFrom: "zyappClaim",
              mediaType: "",
              mediaSize: 0,
              insertTime: "",
              validate: "1",
              fileName: "",
              origFileName: "",
              mediaKind: "carLossMedia",
              mediaKindName: "车辆侧后方",
              storePath: null,
              uploadToZyic: "0",
              zyicBusinessCode: "CLD504",
              fileDesc: "车辆损失照片"
            },
            {
              src: "/static/image/hold.png",
              registNo: "",
              uploader: "",
              sourceFrom: "zyappClaim",
              mediaType: "",
              mediaSize: 0,
              insertTime: "",
              validate: "1",
              fileName: "",
              origFileName: "",
              mediaKind: "carLossMedia",
              mediaKindName: "碰撞部位",
              storePath: null,
              uploadToZyic: "0",
              zyicBusinessCode: "CLD504",
              fileDesc: "车辆损失照片"
            },
            {
              src: "/static/image/hold.png",
              registNo: "",
              uploader: "",
              sourceFrom: "zyappClaim",
              mediaType: "",
              mediaSize: 0,
              insertTime: "",
              validate: "1",
              fileName: "",
              origFileName: "",
              mediaKind: "carLossMedia",
              mediaKindName: "行驶证正本",
              storePath: null,
              uploadToZyic: "0",
              zyicBusinessCode: "CLD504",
              fileDesc: "车辆损失照片"
            },
            {
              src: "/static/image/hold.png",
              registNo: "",
              uploader: "",
              sourceFrom: "zyappClaim",
              mediaType: "",
              mediaSize: 0,
              insertTime: "",
              validate: "1",
              fileName: "",
              origFileName: "",
              mediaKind: "carLossMedia",
              mediaKindName: "行驶证副本",
              storePath: null,
              uploadToZyic: "0",
              zyicBusinessCode: "CLD504",
              fileDesc: "车辆损失照片"
            }
          ]
        },
        propLossMedia: {
          mediaKindName: "财务损失照片",
          fileDesc: "财务损失照片",
          mediaKind: "propLossMedia",
          zyicBusinessCode: "CLD601",
          imageArr: []
        },
        personLossMedia: {
          mediaKindName: "人伤跟踪照片",
          fileDesc: "人伤跟踪照片",
          mediaKind: "personLossMedia",
          zyicBusinessCode: "CLD704",
          imageArr: []
        },
        elseMedia: {
          fileDesc: "其他材料照片",
          mediaKind: "elseMedia",
          mediaKindName: "其他材料照片",
          zyicBusinessCode: "CLDE03",
          imageArr: []
        }
      },
      actions: [
        {
          name: "拍照",
          method: this.onLoadimgLocal
        },
        {
          name: "从相册中选择",
          method: this.onLoadsomePic
        }
      ],
      sheetVisible: false,
      usernamem:""
    };
  },
  components: {
    "sur-header": surHeader,
    Actionsheet
  },
  created: function() {

  }, 
     mounted() {
        if (this.$route.query) {
          this.registNo = this.$route.query.registNo;
          this.comCode=this.$route.query.comCode;
          this.uploader=this.$route.query.usercode;
          this.username=this.$route.query.username;
        }
         this.usernamem=this.username;
        this.queryImage();
        this.initUploader();
      },
      methods: {
        initUploader(){
            for(let x in this.certifyPics){
              if( this.certifyPics[x].imageArr.length>0){
                this.certifyPics[x].imageArr.uploader = this.uploader;
                this.certifyPics[x].imageArr.registNo=this.registNo;
              }
            }
          },
        actionSheet(certifyCode,key) {
          this.sheetVisible = true;
          this.currUploadCertifyCode = certifyCode;
          this.key=key;
        },
        //调取相册
        onLoadsomePic(elId) {
          navigator.camera.getPicture(
            this.onLoadImageLocalSuccess,
            this.onLoadImageFail,
            {
              destinationType: Camera.DestinationType.DATA_URL,
              sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM
            }
          );
        },
        onLoadImageLocalSuccess(e) {
          const vm = this;
          vm.loadPic(e);
        },
        onLoadImageFail() {
          vm.$toast("上传失败,请稍后重试");
        },
        //调取摄像头
        onLoadimgLocal(elId, certifyCode) {
          navigator.camera.getPicture(
            this.onLoadImageLocalSuccess1,
            this.onLoadImageFail1,
            {
              destinationType: Camera.DestinationType.DATA_URL,
              sourceType: Camera.PictureSourceType.CAMERA
            }
          );
        },
        onLoadImageLocalSuccess1(e) {
          const vm = this;
          vm.loadPic(e);
        },
        onLoadImageFail1() {
          vm.$toast("调取失败,请稍后重试");
        },
    
    loadPic(e) {
      const vm = this;
      vm.$indicator.open({
        text: "正在上传...",
        spinnerType: "fading-circle",
        duration: -1
      });
      try {
        let img = new Image();
        img.src = "data:image/jpeg;base64," + e;
        // let file = e.target.files[0];
        // let img = new Image();
        // let reader = new FileReader();
        // reader.readAsDataURL(file);
        // reader.onload = function(e){
        //   img.src = e.target.result;
        // };
        // 缩放图片需要的canvas
        let canvas = document.createElement("canvas");
        let context = canvas.getContext("2d");
        img.onload = function() {
          let originWidth = this.width;
          let originHeight = this.height;
          var maxWidth = 800,
            maxHeight = 800;
          var targetWidth = originWidth,
            targetHeight = originHeight;
          if (originWidth > maxWidth || originHeight > maxHeight) {
            if (originWidth / originHeight > maxWidth / maxHeight) {
              targetWidth = maxWidth;
              targetHeight = Math.round(
                maxWidth * (originHeight / originWidth)
              );
            } else {
              targetHeight = maxHeight;
              targetWidth = Math.round(
                maxHeight * (originWidth / originHeight)
              );
            }
          }
          canvas.width = targetWidth;
          canvas.height = targetHeight;
          context.clearRect(0, 0, targetWidth, targetHeight);
          context.drawImage(img, 0, 0, targetWidth, targetHeight);
          canvas.toBlob(
            function(blob) {
              let param = new FormData(); //创建form对象
              param.append("file", blob, new Date().getTime() + ".jpg"); //通过append向form对象添加数据
              param.append("registNo", vm.registNo);
              param.append("uploader", vm.uploader);
              let config = {
                headers: { "Content-Type": "multipart/form-data" }
              };
              vm.$axios
                .post(
                  `${vm.PRODUCT_INSURED_URL_PREFIX}/media/uploadToFTP`,
                  param,
                  config
                )
                .then(response => {
                  vm.$indicator.close();
                  const data = response.data;
                  console.log(data);
                  if (data.status == 1) {
                      let crItem = data.data, tarItem = {};
                    if (  crItem.fileName != null &&crItem.fileName != "") {
                      if (vm.key>=0) {
                       tarItem = {
                            src: `${vm.PRODUCT_INSURED_URL_PREFIX}/media/viewMeida/` +
                                  vm.registNo +
                                  "/" +
                                  crItem.fileName.split(".")[0] +
                                  "/" +
                                  crItem.fileName.split(".")[1],
                            mediaKind: vm.certifyPics[vm.currUploadCertifyCode].mediaKind,
                            uploader: vm.uploader,
                            mediaKindName: vm.certifyPics[vm.currUploadCertifyCode].imageArr[vm.key].mediaKindName,
                            fileDesc: vm.certifyPics[vm.currUploadCertifyCode].fileDesc,
                            zyicBusinessCode: vm.certifyPics[vm.currUploadCertifyCode].zyicBusinessCode,
                            sourceFrom:"zyappClaim",
                            fileName:crItem.fileName,
                            mediaType:crItem.mediaType,
                            origFileName:crItem.origFileName,
                            mediaSize:crItem.mediaSize
                        }
                        vm.$set(vm.certifyPics[vm.currUploadCertifyCode].imageArr, vm.key, tarItem);

                      } else {
                        tarItem = {
                            src: `${vm.PRODUCT_INSURED_URL_PREFIX}/media/viewMeida/` +
                                  vm.registNo +
                                  "/" +
                                  data.data.fileName.split(".")[0] +
                                  "/" +
                                  data.data.fileName.split(".")[1],
                            mediaKind: vm.certifyPics[vm.currUploadCertifyCode].mediaKind,
                            uploader: vm.uploader,
                            mediaKindName: vm.certifyPics[vm.currUploadCertifyCode].mediaKindName,
                            fileDesc: vm.certifyPics[vm.currUploadCertifyCode].fileDesc,
                            zyicBusinessCode: vm.certifyPics[vm.currUploadCertifyCode].zyicBusinessCode,
                            sourceFrom:"zyappClaim",
                            fileName:crItem.fileName,
                            mediaType:crItem.mediaType,
                            origFileName:crItem.origFileName,
                            mediaSize:crItem.mediaSize
                        }
                        vm.certifyPics[vm.currUploadCertifyCode].imageArr.push(tarItem);
                      };
                    }
                  }
                })
                .catch(function(e) {
                  vm.$indicator.close();
                  vm.$toast("上传异常,请稍后重试");
                  console.info(exception);
                });
            },
            "image/jpeg",
            0.9
          );
          e.target.value = "";
        };
      } catch (exception) {
        vm.$indicator.close();
        vm.$toast("上传异常,请稍后重试");
        // console.info(exception);
      }
    },
    // 查询
    queryImage() {
      const vm = this;
      vm.$indicator.open({
        text: "请等待...",
        spinnerType: "fading-circle",
        duration: -1
      });
      vm
        .$axios({
          method: "post",
          async: false,
          // 测试地址
          // url: `${this.PRODUCT_PUBLICK_URL_PREFIX}/mediaCtrl/listNoPage`,
          url: `${this.PRODUCT_INSURED_URL_PREFIX}/media/queryMedia`,
          data: {
            registNo:vm.registNo
          }
        })
        .then(function(response) {
          vm.$indicator.close();
          const data = response.data;
          if (data.status === 1) {
            const imageArray = data.data;
            var item;
            for (var i = 0; i < imageArray.length; i++) {
              imageArray[i].src =
                `${vm.PRODUCT_INSURED_URL_PREFIX}/media/viewMeida/` +
                imageArray[i].registNo +
                "/" +
                imageArray[i].fileName.split(".")[0] +
                "/" +
                imageArray[i].fileName.split(".")[1];
              if (imageArray[i].mediaKind == "checkMedia") {
                vm.certifyPics.checkMedia.imageArr.push(imageArray[i]); //查勘imageArray[i]
              } else if (imageArray[i].mediaKind == "carLossMedia") {
                if (imageArray[i].mediaKindName == "车辆侧前方") {
                  vm.$set(vm.certifyPics.carLossMedia.imageArr, 0, imageArray[i]);
                } else if (imageArray[i].mediaKindName == "车辆侧后方") {
                  vm.$set(vm.certifyPics.carLossMedia.imageArr, 1, imageArray[i]);
                } else if (imageArray[i].mediaKindName == "碰撞部位") {
                  vm.$set(vm.certifyPics.carLossMedia.imageArr, 2, imageArray[i]);
                } else if (imageArray[i].mediaKindName == "行驶证正本") {
                  vm.$set(vm.certifyPics.carLossMedia.imageArr, 3, imageArray[i]);
                } else if (imageArray[i].mediaKindName == "行驶证副本") {
                  vm.$set(vm.certifyPics.carLossMedia.imageArr, 4, imageArray[i]);
                } else {
                  vm.certifyPics.carLossMedia.imageArr.push(imageArray[i]);
                }
                //车辆
              } else if (imageArray[i].mediaKind == "propLossMedia") {
                vm.certifyPics.propLossMedia.imageArr.push(imageArray[i]); //财务损失
              } else if (imageArray[i].mediaKind == "personLossMedia") {
                vm.certifyPics.personLossMedia.imageArr.push(imageArray[i]); //人员伤亡
              } else if (imageArray[i].mediaKind == "elseMedia") {
                vm.certifyPics.elseMedia.imageArr.push(imageArray[i]); //其他
              }
            }
            console.log(vm.certifyPics.carLossMedia.imageArr);
          } else {
            vm.$toast(data.error);
          }
        })
        .catch(function(error) {
          vm.$indicator.close();
          vm.$toast("网络连接失败，请检查网络设置后重试");
        });
    },
    // 保存提交
    confirmCertifys() {
      const vm = this;
     vm.$indicator.open({
          text: '正在提交...',
          spinnerType: 'fading-circle',
          duration: -1
        });
      let medias = [];
      let obj = null;
      for (let x in vm.certifyPics) {
        obj = vm.certifyPics[x].imageArr;
        obj.forEach(element => {
          if (
            element.mediaType === "" ||
            element.mediaType == null ||
            element.fileName === "" ||
            element.fileName == null ||
            element.origFileName === "" ||
            element.origFileName == null ||
            element.mediaSize === 0 ||
            element.mediaSize == null
            ||
            element.mediaKind === "" ||
            element.mediaKind == null
          ) {
          } else {
            delete element.id;
            medias.push(element);
          }
        });
      }

      if (medias.length > 0) {
        // 上传保存
        vm.$axios({
            method: "post",
            url: `${this.PRODUCT_INSURED_URL_PREFIX}/media/saveMedia`,
            data: {
              registNo:vm.registNo,
              uploader:vm.uploader,
              medias: medias
            }
          })
          .then(function(response) {
            const data = response.data;
            if (data.status === 1) {
              // 上传到信雅达
              vm.uploadToXYD();
            } else {
              vm.$toast(data.error);
            }
          })
          .catch(function(error) {
            vm.$toast("网络连接失败，请检查网络设置后重试");
          });
      }
    },
    // 标题展开
    showTargetList(key) {
      $($(".itemList")[key]).toggleClass("open");
      $($(".upTitleRight")[key]).toggleClass("zhuan");
    },
    // upload(e, key) {
    //   if (key >= 0) {
    //     e.imageArr[key].src = "/static/image/hold.png";
    //   } else {
    //     var newimgobj = { src: "/static/image/survey.png", title: "其他照片" };
    //     e.imageArr.push(newimgobj);
    //   }
    // }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import "../../styles/common/common.less";
.main {
  background: #fff;
  box-sizing: border-box;
  margin-bottom: 6rem;
}
.itemList {
  height: 4rem;
  overflow: hidden;
  transition: all 0.3s linear;
}
.upTitle {
  padding: 0 0.5rem;
  height: 4rem;
  display: flex;
  justify-content: space-between;
  font-size: 1.7rem;
  line-height: 4rem;
  color: #666;
  border-top: 0.01rem solid #f0f0f0;
  .upTitleLeft {
    img {
      width: 2.5rem;
      height: 2.5rem;
      margin-right: 1rem;
    }
    span {
      display: inline-block;
    }
  }
  .upTitleRight {
    background: url("image/button-into.png");
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-size: 100% 100%;
    transform: rotate(-90deg);
    transition: all 0.3s linear;
    margin-top: 1.35rem;
  }
}
.imgBox {
  border-top: 0.01rem solid #f0f0f0;
  // display: flex;
  // justify-content: space-between;
  // flex-wrap: wrap;
  padding-left: 1rem;
  padding-top: 0.5rem;
  div {
    width: 30%;
    float: left;
    height: 7.5rem;
    margin-right: 0.8rem;
    img {
      width: 100%;
      height: 5rem;
      border: 0.1rem solid #afafaf;
      border-radius: 0.5rem;
    }
    p {
      font-size: 1.4rem;
      color: #666;
      text-align: center;
      margin-top: 0.5rem;
    }
  }
}
.mainbtn {
  border: none;
  width: 90%;
  height: 4rem;
  background: #fc8124;
  position: fixed;
  bottom: 0;
  left: 5%;
  color: #fff;
  font-size: 1.7rem;
}
.open {
  height: max-content !important;
}
.zhuan {
  transform: rotate(90deg) !important;
}
</style>