storevisit-ui-mobile/src/components/supervisortask.vue

<template>
  <div class="questionNamep">
    <div class="cameraDiv">
      <van-icon class="photo photos" name="photograph" size="22px" color="#969696"/>
      <input class="camera" style="opacity: 0;position: absolute;  right: 0;" type="file" name="cover"
             :id="uploadid"
             accept="image/*"
             capture="camera"
             @change="readLocalFile($event)"/>
    </div>
  </div>
</template>

<script>
import {addPhoto} from "@/api/index";

export default {
  name: 'uploadImg',
  props: {
    uploadid: {
      type: String,
      default: ''
    },
    storeGroupId: {
      type: String,
      default: ''
    },
    visitsId: {
      type: String,
      default: ''
    },
    taskId: {
      type: String,
      default: ''
    },
    collectionId: {
      type: String,
      default: ''
    },
    objectType: {
      type: String,
      default: ''
    },
    type: {
      type: Number,
      default: 1
    },
    imgArr: {
      type: Array,
      default() {
        return []
      }
    },
    visitModel: {
      type: String,
      default: '1'
    },
  },
  data() {
    return {
      shows: false,
      url: ""
    }
  },
  methods: {
    //   deleteImg(){
    //
    //  },
    // CurentTime(){
    // 	var now = new Date();
    // 	var year = now.getFullYear();       //年
    // 	var month = now.getMonth() + 1;     //月
    // 	var day = now.getDate();            //日
    // 	var hh = now.getHours();            //时
    // 	var mm = now.getMinutes();          //分
    // 	var clock = year + "-";
    // 	if(month < 10)
    // 		clock += "0";
    // 	  clock += month + "-";
    // 	if(day < 10)
    // 		clock += "0";
    // 	  clock += day + " ";
    // 	// if(hh < 10)
    // 	// 	clock += "0";
    // 	//   clock += hh + ":";
    // 	// if (mm < 10) clock += '0';
    // 	// clock += mm;
    // 	return(clock);
    // },
    readLocalFile(e) {
      this.shows = true
      if (this.objectType == "" || this.objectType == null) {
        this.$toast("请选择类型！")
        return
      }
      var localFile = e.target.files[0];
      var reader = new FileReader();
      var content;
      var that = this;
      reader.onload = function (event) {
        content = event.target.result;
        localFile.content = content
        that.uploadImgs(localFile);
      }
      reader.onerror = function () {
        this.$toast("上传失败！")
      }
      content = reader.readAsDataURL(localFile, "UTF-8");
    },
    uploadImgs(file) {
      if (/\/(?:jpeg|png)/i.test(file.type) && file.size > 200000) {
        this.zcompress(file, 0.7)
      } else {
        this.zcompress(file, 1)
      }
    },
    zcompress(file, quiry) {
      var that = this;
      var loind1 = that.$toast.loading({
        duration: 0,
        message: '上传中...',
        forbidClick: true,
      });
      let canvas = document.createElement("canvas");
      let context = canvas.getContext("2d");
      let img = new Image();
      img.src = file.content;
      img.onload = () => {
        let scale = img.width / 750
        let newWidth = img.width / scale
        let newHeight = img.height / scale
        canvas.width = newWidth;
        canvas.height = newHeight;
        context.drawImage(img, 0, 0, newWidth, newHeight);
        context.fillStyle = "#D27D69";
        context.textBaseline = "middle";
        context.font = "bold "+(newWidth / 28) + "px Arial";
        var chainNameR = localStorage.getItem('chainNameR')
        var ORGName = localStorage.getItem('ORGName')
        var chainNameR1 = ""
        var chainNameR2 = ""
        if (chainNameR.length > 17) {
          chainNameR1 = chainNameR.slice(0, 16)
          chainNameR2 = chainNameR.slice(16)
        } else {
          chainNameR1 = chainNameR
          chainNameR2 = ""
        }
        context.fillText(ORGName + "", newWidth / 10, newHeight / 2 -60);
        context.fillText(that.parseTime(new Date(), '{y}-{m}-{d}') + chainNameR1 + "", newWidth / 10, newHeight / 2);
        context.fillText(chainNameR2 + "", newWidth / 10, newHeight / 2 + 60);
        context.fillStyle = "#8C588B ";
        context.fillText(ORGName + "", newWidth / 10, newHeight / 2 +  110);
        context.fillText(that.parseTime(new Date(), '{y}-{m}-{d}') + chainNameR1 + "",
            newWidth / 10, newHeight / 2 + 170);
        context.fillText(chainNameR2 + "", newWidth / 10, newHeight / 2 + 230);
        file.content = canvas.toDataURL(file.type, quiry);
        const formData = new FormData();
        formData.append("file",file);
        formData.append("collectionItemId", that.collectionId);
        formData.append("objectType", that.objectType);
        formData.append("storeGroupId", that.storeGroupId);
        formData.append("taskId", that.taskId);
        formData.append("visitsId", that.visitsId);
        formData.append("visitModel", that.visitModel);
        formData.append("visitSource", "1");
        addPhoto(formData).then(res => {
          if (res.code == 200) {
            loind1.clear();
            that.$toast("上传成功！")
            that.$emit('newimgarr', {fileUrl: file.content, id: res.data, type: 2});
          } else {
            that.$toast("上传失败！")
          }
        })
      };
    }
  },
}
</script>
<style lang="scss" scoped>
.questionNamep {
  font-size: 16px;
  color: #484848;
  line-height: 40px;
  padding: 0 15px;
  box-sizing: border-box;
  position: relative;

  .cameraDivp {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    .photo {
      /*margin-top: 9px;*/
      float: right;
    }
    .camera {
      width: 60px;
      height: 100%;
      position: absolute;
      right: 0;
      top: 0;
      opacity: 0;
      z-index: 89;
    }
  }

}
</style>