@v2coding/ui 0.1.0 → 0.1.5

package/src/components/field/field.upload.portrait.vue

@@ -1,304 +0,0 @@
-<template>
-  <div>
-    <div class="ui-image-upload-file">
-      <div class="item" v-show="showPhoto">
-        <div class="modal">
-          <a :href="photoUrl" target="_blank"><i class="el-icon-zoom-in"></i></a>
-          <i class="el-icon-delete" @click="remove()"></i>
-        </div>
-        <div class="image" :style="{'background-image': `url(${imgUrl})`}"></div>
-      </div>
-      <el-row v-show="!showPhoto">
-        <div @click="showDialog" class="item upload-btn">
-          <i class="el-icon-fa-camera"></i>
-        </div>
-      </el-row>
-    </div>
-    <ui-dialog :title="title" :visible.sync="visible" width="30%" :confirm="onConfirm">
-      <el-row v-loading="videoLoading">
-        <video id="videos" width="100%"/>
-      </el-row>
-      <el-row class="close">
-        <el-col v-show="false">
-          <canvas id="canvas" :width="w + 'px'" :height="h + 'px'"/>
-        </el-col>
-        <el-col :span="12">
-          <img :src="imgUrl" class="show-img" width="100%" alt="">
-        </el-col>
-        <el-col :span="12" class="buttons">
-          <div class="buttons-desc">
-            <div class="capture">
-              <div
-                  :class="{'out-circle': true, reduce: isReduce}"
-                  @click="capture"
-                  @mousedown="isReduce = true"
-                  @mouseup="isReduce = false"
-                  @mouseleave="isReduce = false"
-              >
-                <i class="el-icon-fa-camera"></i>
-              </div>
-            </div>
-            <el-button @click="updatePortrait">上传照片</el-button>
-          </div>
-        </el-col>
-      </el-row>
-      <span slot="footer" class="dialog-footer">
-        <el-button>取 消</el-button>
-        <el-button type="primary">确 定</el-button>
-      </span>
-    </ui-dialog>
-  </div>
-</template>
-<script>
-  import FieldMixin from './field.mixin';
-  import Upload from './field.helper.upload';
-
-  export default {
-    name: 'ui-field-upload-portrait',
-    mixins: [FieldMixin],
-    data() {
-      return {
-        videoLoading: true, //相机初始化loading
-        isReduce: false, //拍照按钮动画
-        front: true,//是否打开后摄像头
-        showPhoto: false,
-        imgUrl: '',
-        photoUrl: '',
-        w: 320,
-        h: 240,
-      };
-    },
-    props: {
-      params: {
-        type: Object,
-        default: () => ({
-          rootDirName: 'image',
-          fileType: 2,
-        }),
-      },
-      title: {
-        type: String,
-        default: '请上传照片',
-      },
-      filename: {
-        type: String,
-        default: 'file',
-      },
-      url: {
-        type: String,
-        default: '/api/oss/upload',
-      },
-      uploadType: {
-        type: String,
-        validator: (val) => ['oss', 'default'].includes(val),
-        default: 'default',
-      },
-      visible: {
-        type: Boolean,
-        default: false,
-      },
-    },
-    methods: {
-      remove() {
-        this.imgUrl = '';
-        this.showPhoto = false;
-      },
-      showDialog() {
-        this.visible = true;
-        this.init();
-      },
-      onConfirm() {
-        if (this.photoUrl === '') {
-          this.$message.error('请上传图片后点击确定');
-          return;
-        }
-        this.visible = false;
-        this.onChange(this.photoUrl);
-        this.showPhoto = true;
-      },
-      //点击拍照
-      capture() {
-        const videoDom = document.getElementById('videos');
-        const canvas = document.getElementById('canvas');
-        const ctx = canvas.getContext('2d');
-        ctx.drawImage(videoDom, 0, 0, this.w, this.h);
-        this.imgUrl = canvas.toDataURL();
-      },
-      //初始化 打开摄像头
-      init() {
-        const _this = this;
-        const constraints = {video: {width: this.w, height: this.h, facingMode: {exact: this.front ? 'user' : 'environment'}}};
-        navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) {
-          const video = document.querySelector('video');
-          video.srcObject = mediaStream;
-          _this.videoLoading = false;
-          video.onloadedmetadata = function() {
-            video.play();
-          };
-        }).catch(function(err) {
-          console.log(err.name + ': ' + err.message);
-        }); // 总是在最后检查错误
-      },
-      //base64转file
-      toFile(value, fileName) {
-        if (value !== null || ('' && value.indexOf('base'))) {
-          const arr = value.split(','), mime = arr[0].match(/:(.*?);/)[1], bsTr = atob(arr[1]);
-          let n = bsTr.length, u8arr = new Uint8Array(n);
-          while (n--) {
-            u8arr[n] = bsTr.charCodeAt(n);
-          }
-          return new File([u8arr], fileName, {type: mime});
-        }
-      },
-      //上传照片
-      updatePortrait() {
-        if (!this.imgUrl) {
-          this.$message.error('请先拍照后上传');
-          return;
-        }
-        const file = this.toFile(this.imgUrl, 'file.png');
-        console.log(file);
-        const uploadServer = Upload[this.uploadType] || Upload.default;
-        uploadServer(this.url, this.params, {file, filename: this.filename}).then((result) => {
-          console.log(result);
-          this.photoUrl = result.content.url;
-          if (!result.success) {
-            this.$message.error(result.message || '上传失败');
-            return;
-          }
-          this.$message.success('上传成功');
-          this.onChange('');
-        });
-      },
-    },
-  };
-</script>
-<style lang="less" scoped>
-  .ui-image-upload-file {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-
-    .item {
-      position: relative;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      overflow: hidden;
-      width: 140px;
-      height: 140px;
-      margin-bottom: 10px;
-      margin-right: 10px;
-      border: 1px dashed #d0d2d7;
-      padding: 8px;
-      border-radius: 2px;
-      box-sizing: border-box;
-
-      .modal {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        display: flex;
-        align-items: center;
-        justify-content: space-around;
-        background: rgba(0, 0, 0, 0.5);
-        visibility: hidden;
-        line-height: initial;
-        border-radius: 2px;
-
-        [class^='el-icon-'] {
-          color: #fff;
-          font-size: 1.5em;
-          cursor: pointer;
-        }
-      }
-
-      > .image {
-        width: 100%;
-        height: 100%;
-        background: no-repeat center;
-        background-size: contain;
-      }
-
-      &.upload-btn {
-        background: #edeef0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        border: none;
-        cursor: pointer;
-
-        & > i {
-          width: 2em;
-          color: #888c94;
-          font-size: 20px;
-          line-height: 1.2;
-        }
-      }
-    }
-
-    .item:hover .modal {
-      visibility: visible;
-    }
-
-    ::v-deep .preview {
-      display: inline-block;
-      width: auto;
-      max-width: 60%;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-  }
-
-  .show-img {
-    border: 1px dashed #ccc;
-    padding: 5px;
-  }
-
-  .capture {
-    width: 60px;
-    height: 60px;
-    border-radius: 50%;
-    background: #ccc;
-    text-align: center;
-    color: #CCC;
-    overflow: hidden;
-    margin: 0 auto 10px;
-
-    .out-circle {
-      width: 50px;
-      height: 50px;
-      background: #FFF;
-      border-radius: 50%;
-      line-height: 55px;
-      margin: 5px auto;
-      overflow: hidden;
-      cursor: pointer;
-
-      i {
-        font-size: 20px;
-      }
-    }
-
-    .reduce {
-      transform: scale(.8);
-      transition: .2s linear;
-    }
-  }
-
-  .buttons {
-    position: relative;
-    height: 240px;
-
-    .buttons-desc {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-
-    }
-  }
-</style>