cropper.js

16942806 · 刘殿昕 · 0116d6b8 · 16942806 · 16942806 · 16942806
Commit 16942806 authored Apr 24, 2020 by 刘殿昕
7 changed files
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
    "string-format": "^2.0.0",
    "svg-sprite-loader": "^4.2.1",
    "vue": "^2.6.10",
+    "vue-cropper": "^0.5.2",
    "vue-resource": "^1.5.1",
    "vue-router": "^3.0.2",
    "vuex": "^3.1.0"

--- a/src/components/table-um.vue
+++ b/src/components/table-um.vue
@@ -30,6 +30,7 @@
        @select-all="selectAll"
        :defaultSelections="defaultSelections"
        element-loading-text="加载中..."
+        :empty-text="emptyText"
        ref="cesTable"
        v-cloak
      >
@@ -210,7 +211,11 @@ export default {
      type: String,
      default: ""
    },
-    searchNoName: { type: Boolean, default: false }
+    searchNoName: { type: Boolean, default: false },
+    emptyText: {
+      type: String,
+      default: "暂无数据"
+    },
  },
  data() {
    return {

--- a/src/components/updatefile.vue
+++ b/src/components/updatefile.vue
+<template>
+  <div class="footerBtn">
+    <img
+      v-if="attach.laterUrl"
+      :src="attach.laterUrl"
+      class="preview"
+      style="width:200px;height:200px"
+    />
+    <el-button @click="dialogVisible=true">上传头像</el-button>
+    <!-- 弹出层-裁剪 -->
+    <el-dialog title="编辑头像" :visible.sync="dialogVisible" :before-close="handleClose">
+      <span>
+        <el-row>
+          <input
+            type="file"
+            id="uploads"
+            accept="image/png, image/jpeg, image/gif, image/jpg"
+            @change="uploadImg($event,1)"
+            class="el-button"
+            style="margin-bottom:15px"
+          />
+        </el-row>
+        <el-row>
+          <el-col :span="16">
+            <!-- 裁剪 -->
+            <vueCropper
+              style="width:100%;height:300px"
+              ref="cropper"
+              :img="attach.customaryUrl"
+              :autoCrop="options.autoCrop"
+              :fixedBox="options.fixedBox"
+              :canMoveBox="options.canMoveBox"
+              :autoCropWidth="options.autoCropWidth"
+              :autoCropHeight="options.autoCropHeight"
+              :centerBox="options.centerBox"
+              @realTime="realTime"
+            ></vueCropper>
+          </el-col>
+          <el-col :span="8">
+            <h2 align="center">头像预览</h2>
+            <div class="show-preview">
+              <div :style="previews.div" class="preview">
+                <img :src="previews.url" :style="previews.img" />
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+        <el-row class="footerBtn" align="center">
+          <el-button type="primary" size="small" round @click="cut('blob')">确认</el-button>
+          <el-button type="primary" size="small" round @click="handleClose">取消</el-button>
+        </el-row>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { VueCropper } from "vue-cropper";
+export default {
+  components: {
+    VueCropper
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      options: {
+        autoCrop: true, //默认生成截图框
+        fixedBox: true, //固定截图框大小
+        canMoveBox: false, //截图框不能拖动
+        autoCropWidth: 200, //截图框宽度
+        autoCropHeight: 200, //截图框高度
+        centerBox: false //截图框被限制在图片里面
+      },
+      previews: {}, //实时预览图数据
+      attach: {
+        //后端附件表
+        id: "",
+        userId: "",
+        customaryUrl: "", //原图片路径
+        laterUrl: "", //裁剪后图片路径  /static/logo.png
+        attachType: "photo" //附件类型
+      },
+      fileName: "", //本机文件地址
+      uploadImgRelaPath: "" //上传后图片地址
+    };
+  },
+  methods: {
+    //控制弹出层关闭
+    handleClose() {
+      this.dialogVisible = false;
+    },
+    //实时预览
+    realTime(data) {
+      this.previews = data;
+    },
+    //加载头像信息
+    find() {
+      this.userId = sessionStorage.getItem("userId");
+      this.$axios.post("/api/attach/find", this.attach).then(res => {
+        console.log(res);
+      });
+    },
+    //选择本地图片
+    uploadImg(e, num) {
+      var file = e.target.files[0];
+      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
+        this.$message.error("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
+        return false;
+      }
+      console.log(e.target.result);
+      //fileReader 接口，用于异步读取文件数据
+      var reader = new FileReader();
+      reader.readAsDataURL(file); //重要 以dataURL形式读取文件
+      reader.onload = e => {
+        // data = window.URL.createObjectURL(new Blob([e.target.result])) 转化为blob格式
+        let data = e.target.result;
+        this.attach.customaryUrl = data;
+        // 转化为base64
+        // reader.readAsDataURL(file)
+        // 转化为blob
+      };
+    },
+    //确认截图,上传
+    cut(type) {
+      var formData = new FormData();
+      this.$refs.cropper.getCropBlob(res => {
+        //res是裁剪后图片的bolb对象
+        formData.append("file", res, this.userId);
+        this.$axios
+          .put("ssapi", formData, {
+            contentType: false,
+            processData: false,
+            headers: { "Content-Type": "multipart/form-data" }
+          })
+          .then(res => {});
+      });
+    }
+  }
+};
+</script>
+<style scoped>
+/* 弹性布局 水平居中 */
+.show-preview {
+  display: flex;
+  justify-content: center;
+}
+.preview {
+  border-radius: 50%;
+  overflow: hidden;
+  border: 1px solid #cccccc;
+  background: #cccccc;
+}
+.footerBtn {
+  display: flex;
+  justify-content: center;
+  margin-top: 15px;
+}
+</style>
\ No newline at end of file
--- a/src/pages/table_example.vue
+++ b/src/pages/table_example.vue
@@ -14,6 +14,7 @@
      :confirmOptions="confirmOptions"
      :detailsUrl="detailsUrl"
      @primary-edit="editItem"
+      :emptyText="emptyText"
    ></ces-table>
  </div>
 </template>
@@ -52,6 +53,7 @@ export default {
        btnCancelText: "取消", //取消
        btnSubmitText: "确定" //确定
      },
+      emptyText: "暂时没数据"
  }),
  components: {
    cesTable

--- a/src/pages/upload_example.vue
+++ b/src/pages/upload_example.vue
+<template>
+  <div>
+    <update-file
+      :multiple="false"
+      :max="1"
+      :list="imgList1"
+      @getUrl="getImgList1"
+    ></update-file>
+  </div>
+</template>
+<script>
+import updateFile from "../components/updatefile";
+export default {
+  data() {
+    return {
+      imgList1: []
+    };
+  },
+  mounted() {},
+  methods: {
+    getImgList1(url) {
+      this.form.pic_path = url
+        .map((v, k) => {
+          return this.tranlateUrl(v.url);
+        })
+        .join(",");
+    }
+  },
+  components: {
+    updateFile
+  }
+};
+</script>
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -27,7 +27,11 @@ export default new Router({
      name: "table_example",
      component: () => import("@/pages/table_example")
    },
+    {
+      path: "/upload_example", // 表格实例
+      name: "upload_example",
+      component: () => import("@/pages/upload_example")
+    }, 
  ]
 });
--- a/yarn.lock
+++ b/yarn.lock
@@ -28,17 +28,6 @@
    "@babel/runtime" "^7.7.7"
    hammerjs "^2.0.8"
-"@antv/f2@^3.6.0-alpha.2":
-  version "3.6.0-alpha.2"
-  resolved "https://registry.yarnpkg.com/@antv/f2/-/f2-3.6.0-alpha.2.tgz#52459236b1ee02bfb84df5ed7360db1691a70a0b"
-  integrity sha512-h8VC1YqVYwtbMv17FYQVnreQSbovcuGp7sMYOH3lbxFXu6BeXQ5Y3c0VnSY1E7yLFk28VOJUsi2CgWbX1NISKg==
-  dependencies:
-    "@antv/adjust" "~0.1.1"
-    "@antv/scale" "~0.1.2"
-    "@antv/util" "~2.0.6"
-    "@babel/runtime" "^7.7.7"
-    hammerjs "^2.0.8"
 "@antv/gl-matrix@^2.7.1":
  version "2.7.1"
  resolved "https://registry.yarnpkg.com/@antv/gl-matrix/-/gl-matrix-2.7.1.tgz#acb8e37f7ab3df01345aba4372d7942be42eba14"
@@ -66,13 +55,6 @@
  dependencies:
    "@antv/gl-matrix" "^2.7.1"
-"@antv/util@~2.0.6":
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/@antv/util/-/util-2.0.6.tgz#cf0a97de31d4594ab53f49ebcdb7dee85d3e600e"
-  integrity sha512-kWoEiM5OyT2NieEM67rHwoXP/09iRJAho7+TP+FEUWIrJRA6KkSLNipwHhm7D+mA8BuwcKtOe2i7zewobMfJuQ==
-  dependencies:
-    tslib "^1.10.0"
 "@babel/code-frame@^7.8.3":
  version "7.8.3"
  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.8.3.tgz#33e25903d7481181534e12ec0a25f16b6fcf419e"
@@ -765,7 +747,7 @@
    levenary "^1.1.1"
    semver "^5.5.0"
-"@babel/runtime@7.x", "@babel/runtime@^7.4.2", "@babel/runtime@^7.7.7":
+"@babel/runtime@^7.4.2", "@babel/runtime@^7.7.7":
  version "7.8.4"
  resolved "https://registry.npm.taobao.org/@babel/runtime/download/@babel/runtime-7.8.4.tgz#d79f5a2040f7caa24d53e563aad49cbc05581308"
  integrity sha1-159aIED3yqJNU+VjqtScvAVYEwg=
@@ -844,16 +826,6 @@
  resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
  integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==
-"@vant/icons@1.2.1":
-  version "1.2.1"
-  resolved "https://registry.npm.taobao.org/@vant/icons/download/@vant/icons-1.2.1.tgz#309fecb97a4989866f045ce676b545c454701c8f"
-  integrity sha1-MJ/suXpJiYZvBFzmdrVFxFRwHI8=
-"@vue/babel-helper-vue-jsx-merge-props@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.npm.taobao.org/@vue/babel-helper-vue-jsx-merge-props/download/@vue/babel-helper-vue-jsx-merge-props-1.0.0.tgz#048fe579958da408fb7a8b2a3ec050b50a661040"
-  integrity sha1-BI/leZWNpAj7eosqPsBQtQpmEEA=
 "@vue/component-compiler-utils@^3.1.0":
  version "3.1.1"
  resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.1.1.tgz#d4ef8f80292674044ad6211e336a302e4d2a6575"
@@ -1145,11 +1117,6 @@ array-filter@^1.0.0:
  resolved "https://registry.yarnpkg.com/array-filter/-/array-filter-1.0.0.tgz#baf79e62e6ef4c2a4c0b831232daffec251f9d83"
  integrity sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=
-array-find-index@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.npm.taobao.org/array-find-index/download/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
-  integrity sha1-3wEKoSh+Fku9pvlyOwqWoexBh6E=
 array-find@^1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/array-find/-/array-find-1.0.0.tgz#6c8e286d11ed768327f8e62ecee87353ca3e78b8"
@@ -2713,11 +2680,6 @@ esrecurse@^4.1.0:
  dependencies:
    estraverse "^4.1.0"
-esri-loader@^2.13.0:
-  version "2.13.0"
-  resolved "https://registry.yarnpkg.com/esri-loader/-/esri-loader-2.13.0.tgz#2faea3dc21f34b2ecc1421c29420829f871577a8"
-  integrity sha512-8a0sKovo1p3udCzj4ybT4/bn4+1w3tAhRIKbrL+KrV08919luOc+PR0gsnh4X7fbZ1KaU8uLt3KcpIhio71TlA==
 estraverse@^4.1.0, estraverse@^4.1.1:
  version "4.3.0"
  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
@@ -4418,15 +4380,6 @@ minimist@^1.2.0:
  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
  integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
-mint-ui@^2.2.13:
-  version "2.2.13"
-  resolved "https://registry.npm.taobao.org/mint-ui/download/mint-ui-2.2.13.tgz#856a2cba9608c6ecf21f0e521ce89ed8ddfe33d3"
-  integrity sha1-hWosupYIxuzyHw5SHOie2N3+M9M=
-  dependencies:
-    array-find-index "^1.0.2"
-    raf.js "0.0.4"
-    vue-lazyload "^1.0.1"
 mississippi@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-2.0.0.tgz#3442a508fafc28500486feea99409676e4ee5a6f"
@@ -5646,11 +5599,6 @@ querystringify@^2.1.1:
  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.1.tgz#60e5a5fd64a7f8bfa4d2ab2ed6fdf4c85bad154e"
  integrity sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==
-raf.js@0.0.4:
-  version "0.0.4"
-  resolved "https://registry.npm.taobao.org/raf.js/download/raf.js-0.0.4.tgz#f15af445d241b27fa7131a57450b67ef9c402fec"
-  integrity sha1-8Vr0RdJBsn+nExpXRQtn75xAL+w=
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
  version "2.1.0"
  resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -6654,7 +6602,7 @@ tryer@^1.0.1:
  resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8"
  integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA==
-tslib@^1.10.0, tslib@^1.9.0:
+tslib@^1.9.0:
  version "1.11.1"
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
  integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==
@@ -6903,16 +6851,6 @@ vanilla-masker@^1.2.0:
  resolved "https://registry.yarnpkg.com/vanilla-masker/-/vanilla-masker-1.2.0.tgz#c2830e9d994a5fecd2261506477c2707fe589756"
  integrity sha1-woMOnZlKX+zSJhUGR3wnB/5Yl1Y=
-vant@^2.5.3:
-  version "2.5.3"
-  resolved "https://registry.npm.taobao.org/vant/download/vant-2.5.3.tgz#1c34ea853a2db62c6c6dcc45b4673ab27696c82e"
-  integrity sha1-HDTqhTottixsbcxFtGc6snaWyC4=
-  dependencies:
-    "@babel/runtime" "7.x"
-    "@vant/icons" "1.2.1"
-    "@vue/babel-helper-vue-jsx-merge-props" "^1.0.0"
-    vue-lazyload "1.2.3"
 vary@~1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
@@ -6928,21 +6866,16 @@ vm-browserify@^1.0.1:
  resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
  integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
+vue-cropper@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/vue-cropper/-/vue-cropper-0.5.2.tgz#069b2ffe5336b3f800d3049df2b0746263bd8642"
+  integrity sha512-51lj/7s3ok6pVvceibc/dM4zFccrx3020CX7i/k6Kl9K3M9ot8NXRvXf813ME2Dwwa3Eb/TeSM87+zu5ZcXAZA==
 vue-hot-reload-api@^2.3.0:
  version "2.3.4"
  resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
  integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
-vue-lazyload@1.2.3:
-  version "1.2.3"
-  resolved "https://registry.npm.taobao.org/vue-lazyload/download/vue-lazyload-1.2.3.tgz#901f9ec15c7e6ca78781a2bae4a343686bdedb2c"
-  integrity sha1-kB+ewVx+bKeHgaK65KNDaGve2yw=
-vue-lazyload@^1.0.1:
-  version "1.3.3"
-  resolved "https://registry.npm.taobao.org/vue-lazyload/download/vue-lazyload-1.3.3.tgz#4df50a271bde9b74c3caf7a228d6e0af50d5682f"
-  integrity sha1-TfUKJxvem3TDyveiKNbgr1DVaC8=
 vue-loader@^15.7.0:
  version "15.9.0"
  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.9.0.tgz#5d4b0378a4606188fc83e587ed23c94bc3a10998"