手机解决拍照上传图片

UpLoadImg.vue

<template>
      <div class="card-prove">
        <div class="file-block">
            <van-row>
                <van-col span="6" class="mint-cell-title"><span style="color: red;" v-if="labelName=='CreditImage'||labelName=='POS_Image'">*</span>{{label}}</van-col>
                <van-col span="14" offset="2" class="uploadimage">
                    <div class="weui-image-tip">
                        单击预览图片，双击删除图片
                    </div>
                    <div class="file-img">
                        <input type="file" id="fileId" accept="image/*" @change="changeinpfile($event)" />
                        <van-icon name="photograph" />
                    </div>
                </van-col>
            </van-row>
        </div>

        <div class="file-show" v-if="credentialsFile" @click="judge(credentialsFile)">
          <!-- ondblclick="deleteImg" -->
            <!-- <div class="deleteIcon"><van-icon name="cross" /></div> -->
            <!-- <img :src="imgUrl" alt v-if="!credentialsFile"/> -->
            <img :src="credentialsFile" alt/>
        </div>

      </div>
</template>

<script>
import Vue from "vue";
import axios from "axios";
import { mapGetters, mapActions } from "vuex";
import EXIF from "exif-js";
import loadingImg from "@/assets/logo.png";
import { UploadImage,POS_Info } from "@/axios/api"; // 接口调用

import { ImagePreview,Dialog,Toast } from 'vant';
import storage from '@/utils/storage.js'
// 全局注册
Vue.use(ImagePreview);
Vue.use(Dialog);
Vue.use(Toast);

// import { saveTourist } from "@/axios/api.js";
export default {
  name:'UploadOneImg',
  // 接受父组件的值
  props: [
    'label',
    'labelName',
    'imgUrl',
    'imageName'
  ],
  data() {
    return {
      imageData: "",
      form: {
        credentialsFile: ""
      },
      credentialsFile: '',
      grade:0,
      POS_ID:'',
      imageUrl:''
    };
  },
  created() {
    this.POS_ID= this.$route.query.POS_ID
    if(this.POS_ID){
      this.getBasicValue()
    }
    
  },
  mounted(){
    
    
  },
  methods: {
    async getBasicValue () {
      const toast2 = Toast.loading({
          message: '获取数据中...',
          forbidClick: true,
          duration:0
      });
      var data = {
          token:storage.get('user').Token,
          POS_ID:this.POS_ID
      }

      await POS_Info(data)
          .then(res => {
              toast2.clear();//清除加载中
              // 商户信息
              this.formList = res.data.data
              if(this.labelName=="POS_Image") {
                this.credentialsFile = this.formList.POS_ImageUrl==null?'':this.formList.POS_ImageUrl
              }else if(this.labelName=="IDCard_ImageDown"){
                this.credentialsFile = this.formList.IDCard_ImageDownUrl==null?'':this.formList.IDCard_ImageDownUrl
              }else if(this.labelName=="IDCard_ImageUp"){
                this.credentialsFile = this.formList.IDCard_ImageUpUrl==null?'':this.formList.IDCard_ImageUpUrl
              }else if(this.labelName=="CreditImage"){
                this.credentialsFile = this.formList.CreditImageUrl==null?'':this.formList.CreditImageUrl
              }
              
          })
          .catch(err => { console.log(err) });
  },



    compression(file) {
      var that = this;
      //loading("处理中，请稍候", 60000);
      var fileType = file.type;
      var orientation = 0;
      if (file && /^image\//i.test(file.type)) {
        EXIF.getData(file, function() {
          orientation = EXIF.getTag(file, "Orientation");
        });
        var fileReader = new FileReader();

        fileReader.onload = function(event) {
          var result = event.target.result;
          var image = new Image();
          image.src = result;
          image.onload = function() {
            var canv = document.createElement("canvas");
            var scale = 1;
            //最大宽度和高度
            var maxWidth = 1600;
            var maxHeight = 1200;
            if (this.width > maxWidth || this.height > maxHeight) {
              if (this.width > this.height) {
                //如果宽度大于高度，则根据宽度计算缩放比例，高度按比例缩放
                scale = maxWidth / this.width;
              } else {
                //如果高度大于宽度，则根据高度计算缩放比例，宽度按比例缩放
                scale = maxHeight / this.height;
              }
            }
            canv.width = this.width * scale;
            canv.height = this.height * scale; //计算等比缩小后图片宽高

            switch (orientation) {
              case 6:
              case 8:
                canv.width = this.height * scale;
                canv.height = this.width * scale;
                break;
            }
            var ctx = canv.getContext("2d");

            //解决ios图片旋转问题
            switch (orientation) {
              //iphone横屏拍摄，此时home键在左侧
              case 3:
                // 180度向左旋转
                ctx.translate(this.width * scale, this.height * scale);
                ctx.rotate(Math.PI);
                break;
              //iphone竖屏拍摄，此时home键在下方(正常拿手机的方向)
              case 6:
                ctx.rotate(0.5 * Math.PI);
                ctx.translate(0, -this.height * scale);
                break;
              //iphone竖屏拍摄，此时home键在上方
              case 8:
                // 逆时针旋转90度
                ctx.rotate(-0.5 * Math.PI);
                ctx.translate(-this.width * scale, 0);
                break;
            }
            ctx.drawImage(this, 0, 0, canv.width, canv.height);
            that.imageData = canv.toDataURL(fileType, 0.8);
            that.credentialsFile = that.imageData;
            const blob = that.dataURLtoBlob(that.imageData);
            that.form.credentialsFile = that.blobToFile(blob, file.name);
            // that.verificationForm();
            const files = {
              type : that.form.credentialsFile.type,
              content : that.imageData
            }
            that.uploadImg(files)
            
            };

        };
        fileReader.readAsDataURL(file);
      }
    },
    //将base64转换为blob
    dataURLtoBlob(dataurl) {
      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 Blob([u8arr], { type: mime });
    },
    //将blob转换为file
    blobToFile(theBlob, fileName) {
      theBlob.lastModifiedDate = new Date();
      theBlob.name = fileName;
      return theBlob;
    },
    // 选择图片
    changeinpfile(imgFile) {
      const filedata = imgFile.target.files[0];
      this.compression(filedata);
    },
    async uploadImg(file){
      var imgtype = file.type.split('/')[1]
      var imgdata = file.content.substr(file.content.indexOf("base64,") + 7);
      var arr = new Array();
      var images = new Object();
      images.dataID = this.POS_ID;
      images.tableName = this.imageName;
      images.fieldName = this.labelName;
      images.image = imgdata;
      images.imageType = imgtype;
      arr.push(images);
      var data = JSON.stringify(arr);
      await UploadImage(data)
        .then(res => {
            this.imageUrl = res.data.AttVisualPath[0]
            if(this.labelName=="POS_Image") {
              var POS_ImageData = res.data
            }else if(this.labelName=="IDCard_ImageDown"){
              var IDCard_ImageDownData = res.data
            }else if(this.labelName=="IDCard_ImageUp"){
              var IDCard_ImageUpData = res.data
            }else if(this.labelName=="CreditImage"){
              var CreditImageData = res.data
            }
            // this.sentToParent = res.data
            this.$emit('func',POS_ImageData)
            this.$emit('func2',IDCard_ImageDownData)
            this.$emit('func3',IDCard_ImageUpData)
            this.$emit('func4',CreditImageData)
            
        })
        .catch(err => { console.log(err) });
    },

    // 预览图片
    previewImg(val,val2){
      console.log('111');
      ImagePreview([
        val||val2,
      ]);
      
    },
    judge(val,val2){
      if (this.grade < 2) {
        this.grade++;//根据需要修改if限制
        console.log(88888,this.grade);
        setTimeout(()=> {
            if (this.grade == 1) {
                this.previewImg(val,val2);
            }
            if (this.grade == 2) {
                Dialog.confirm({
                  title: '提示',
                  message: '您确定要删除吗',
                })
                  .then(() => {
                    // on confirm
                    this.credentialsFile = ''
                    // this.imgUrl = ''
                  })
                  .catch(() => {
                    // on cancel
                  });
            }
            //如需要可继续添加更多点击事件
            this.grade = 0;
        }, 200)
      }
    },

    
    

  }
};
</script>

<style scoped lang='less'>
  @import '~@/assets/less/index.less';
      
</style>

_YQFK_Edit.vue

<template>
    <div class="_Search">

        <van-form class="_Searchform">
            <!-- 店面实景(店招)照片 -->
            <UploadOneImg label="店面实景(店招)照片" labelName="POS_Image" imageName="TB_POS" @func="getUrlFormSon"></UploadOneImg>

            <div style="margin: 16px;" @click="onSubmit">
                <van-button block type="info"  :disabled="disable">
                    保存
                </van-button>
            </div>

        </van-form>
        
    </div>
</template>
<script>
import Vue from 'vue';
import UploadOneImg from '@/views/Implement/UpLoadImg.vue';

export default {
    components: {
      UploadOneImg

    },
   methods:{
        // ================= 上传图片zhi 返回过来的图片地址和图片id ===================
        getUrlFormSon(data){
            // 街面实景
            this.formList.POS_ImageUrl = data.AttVisualPath[0]
            this.formList.POS_Image = Number(data.AttachmentIds)
        },
        getUrlFormSon2(data2){
            // 身份证反面
            this.formList.IDCard_ImageDownUrl = data2.AttVisualPath[0]
            this.formList.IDCard_ImageDown = Number(data2.AttachmentIds)
        },
        getUrlFormSon3(data3){
            // 身份证正面
            this.formList.IDCard_ImageUpUrl = data3.AttVisualPath[0]
            this.formList.IDCard_ImageUp = Number(data3.AttachmentIds)
        },
        getUrlFormSon4(data4){
            // 营业执照
            this.formList.CreditImageUrl = data4.AttVisualPath[0]
            this.formList.CreditImage = Number(data4.AttachmentIds)
        },
       

    },
}
</script>
<style lang="less" scoped>
    @import '~@/assets/less/index.less';
</style>