From 826c65fc925c81404dd224316e770e3aab906432 Mon Sep 17 00:00:00 2001
From: liudianxin <liudianxin@bd-apaas.com>
Date: Fri, 24 Apr 2020 19:01:59 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E7=BB=84=E4=BB=B6=EF=BC=8C?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../{updatefile.vue => cropper.vue}           | 129 ++++++-----
 src/components/table-input.vue                |  47 ++--
 src/components/table-um.vue                   |  87 ++++++--
 src/components/upload_file.vue                | 211 ++++++++++++++++++
 src/pages/table_example.vue                   |  57 ++++-
 src/pages/upload_example.vue                  |  71 ++++--
 6 files changed, 479 insertions(+), 123 deletions(-)
 rename src/components/{updatefile.vue => cropper.vue} (62%)
 create mode 100644 src/components/upload_file.vue

diff --git a/src/components/updatefile.vue b/src/components/cropper.vue
similarity index 62%
rename from src/components/updatefile.vue
rename to src/components/cropper.vue
index 7bad01c..19e795a 100644
--- a/src/components/updatefile.vue
+++ b/src/components/cropper.vue
@@ -1,29 +1,27 @@
 <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>
-
+  <div class="add_img">
+    <div class="add_pic">
+      <i class="el-icon-plus add_icon"></i>
+      <input
+        type="file"
+        id="uploads"
+        class="up_input"
+        accept="image/png, image/jpeg, image/gif, image/jpg"
+        @change="uploadImg($event,1)"
+      />
+    </div>
     <!-- 弹出层-裁剪 -->
-    <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">
-            <!-- 裁剪 -->
+    <el-dialog
+      title="编辑图片"
+      :visible.sync="dialogVisible"
+      :before-close="handleClose"
+      :close-on-click-modal="false"
+      class="cropper_dia"
+    >
+      <div style="width； 100%">
+        <div class="cropper_container">
+          <!-- 裁剪 -->
+          <div class="croppers">
             <vueCropper
               style="width:100%;height:300px"
               ref="cropper"
@@ -36,21 +34,17 @@
               :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>
+          </div>
+          <!-- 实时裁剪结果 -->
+          <div :style="previews.div" class="preview">
+            <img :src="previews.url" :style="previews.img" />
+          </div>
+        </div>
         <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>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -67,18 +61,17 @@ export default {
       options: {
         autoCrop: true, //默认生成截图框
         fixedBox: true, //固定截图框大小
-        canMoveBox: false, //截图框不能拖动
+        canMoveBox: true, //截图框不能拖动
         autoCropWidth: 200, //截图框宽度
         autoCropHeight: 200, //截图框高度
         centerBox: false //截图框被限制在图片里面
       },
       previews: {}, //实时预览图数据
       attach: {
-        //后端附件表
         id: "",
         userId: "",
         customaryUrl: "", //原图片路径
-        laterUrl: "", //裁剪后图片路径  /static/logo.png
+        laterUrl: "", //裁剪后图片路径
         attachType: "photo" //附件类型
       },
       fileName: "", //本机文件地址
@@ -94,10 +87,10 @@ export default {
     realTime(data) {
       this.previews = data;
     },
-    //加载头像信息
+    //加载图片信息
     find() {
       this.userId = sessionStorage.getItem("userId");
-      this.$axios.post("/api/attach/find", this.attach).then(res => {
+      this.$http.post("ssapi", this.attach).then(res => {
         console.log(res);
       });
     },
@@ -108,7 +101,7 @@ export default {
         this.$message.error("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
         return false;
       }
-      console.log(e.target.result);
+      // console.log(e.target);
       //fileReader 接口，用于异步读取文件数据
       var reader = new FileReader();
       reader.readAsDataURL(file); //重要 以dataURL形式读取文件
@@ -122,6 +115,7 @@ export default {
         // reader.readAsDataURL(file)
         // 转化为blob
       };
+      this.dialogVisible = true;
     },
     //确认截图,上传
     cut(type) {
@@ -129,13 +123,17 @@ export default {
       this.$refs.cropper.getCropBlob(res => {
         //res是裁剪后图片的bolb对象
         formData.append("file", res, this.userId);
-        this.$axios
-          .put("ssapi", formData, {
+        let url = "ssurl";
+        this.$http
+          .post(url, formData, {
             contentType: false,
             processData: false,
             headers: { "Content-Type": "multipart/form-data" }
           })
-          .then(res => {});
+          .then(res => {
+            // 上传图片后服务器返回访问路径
+            this.$emit("getNewUrl", res.data.visitUrl);
+          });
       });
     }
   }
@@ -143,21 +141,52 @@ export default {
 </script>
 
 <style scoped>
-/* 弹性布局 水平居中 */
-.show-preview {
-  display: flex;
-  justify-content: center;
+.add_img {
+  display: inline-block;
+  margin-left: 10px;
+}
+.add_pic {
+  width: 100px;
+  height: 100px;
+  border: 1px #409eff solid;
+  border-radius: 5px;
+  position: relative;
+}
+.add_icon {
+  position: absolute;
+  top: calc((100% - 40px) / 2);
+  left: calc((100% - 40px) / 2);
+  color: #409eff;
+  font-size: 40px;
+}
+.up_input {
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+.cropper_container {
+  width: 100%;
+}
+.croppers {
+  display: inline-block;
+  width: 400px;
 }
-
 .preview {
-  border-radius: 50%;
+  display: inline-block;
   overflow: hidden;
   border: 1px solid #cccccc;
   background: #cccccc;
+  margin-left: 20px;
 }
 .footerBtn {
   display: flex;
   justify-content: center;
   margin-top: 15px;
 }
+</style>
+<style>
+.cropper_dia .el-dialog {
+  width: 860px;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/table-input.vue b/src/components/table-input.vue
index d898a33..42c1850 100644
--- a/src/components/table-input.vue
+++ b/src/components/table-input.vue
@@ -1,41 +1,46 @@
 <template>
-  <div class="text-xs-center" @click="changeStatus">
-    <input ref="inp" v-show="inputStatus" v-model="inputText" @blur="changeStatus" class="table_in_input" />
-    <span v-show="!inputStatus">{{ item }}</span>
+  <div class="text-xs-center">
+    <el-input ref="inp" v-model="inputText" size="small" @input="changeValue" class="table_in_input"></el-input>
   </div>
 </template>
 
 <script>
 import helper from "@/services/helper";
 export default {
-  props: ["item", "header", "rowId"],
+  props: {
+    item: {
+      type: String,
+      default: ""
+    },
+    header: {
+      type: String,
+      default: ""
+    },
+    rowId: {
+      type: Number,
+      default: 0
+    }
+  },
   data: () => ({
-    inputStatus: false,
     inputText: ""
   }),
+  mounted() {
+    this.inputText = this.item;
+  },
   methods: {
-    changeStatus() {
-      this.inputStatus = !this.inputStatus;
-      if (this.inputStatus) {
-        // 聚焦事件需要延时
-        setTimeout(() => {
-          this.$refs.inp.focus();
-        }, 100);
-        this.inputText = this.item;
-      } else {
-        this.$emit("changeInputValue", {
-          rowId: this.rowId,
-          header: this.header,
-          inputValue: this.inputText
-        });
-      }
+    changeValue() {
+      this.$emit("changeInputValue", {
+        rowId: this.rowId,
+        header: this.header,
+        inputValue: this.inputText
+      });
     }
   }
 };
 </script>
 <style scoped>
 .text-xs-center {
-  height: 24px;
+  height: 32px;
 }
 .text-xs-center input {
   width: 100%;
diff --git a/src/components/table-um.vue b/src/components/table-um.vue
index 8d378b2..26c39c8 100644
--- a/src/components/table-um.vue
+++ b/src/components/table-um.vue
@@ -25,18 +25,20 @@
       <el-table
         :data="selectedTabsPage"
         :size="size"
-        :border="isBorder"
+        :border="border"
         @select="select"
         @select-all="selectAll"
         :defaultSelections="defaultSelections"
         element-loading-text="加载中..."
         :empty-text="emptyText"
+        :stripe="stripe"
         ref="cesTable"
+        :class="radius?'table_radius':''"
         v-cloak
       >
         <el-table-column v-if="isSelection" type="selection" align="center"></el-table-column>
         <!-- 序号 -->
-        <el-table-column v-if="isIndex" type="index" :label="indexLabel" width="40" align="center"></el-table-column>
+        <el-table-column v-if="isIndex" type="index" :label="indexLabel" width="80" align="center"></el-table-column>
 
         <!-- 数据栏 -->
         <el-table-column
@@ -86,9 +88,9 @@
       </el-table>
     </section>
     <!-- 分页 -->
-    <section class="ces-pagination" v-if="selectedTabsPage && selectedTabsPage.length != 0">
+    <section class="ces-pagination" v-if="paginationShow">
       <div class="ces_page_total">共 {{ pagination.total }} 个条目</div>
-      <div class="ces_page_num">
+      <div class="ces_page_num" v-if="pageSizeShow">
         <div class="ces_page_num_sel">
           <el-select
             v-model="pagination.rowsPerPage"
@@ -150,7 +152,6 @@ export default {
   props: {
     // 表格型号：mini,medium,small
     size: { type: String, default: "medium" },
-    isBorder: { type: Boolean, default: false },
     loading: { type: Boolean, default: false },
     // 表格数据
     headers: { type: Array, default: () => [] },
@@ -216,6 +217,34 @@ export default {
       type: String,
       default: "暂无数据"
     },
+    autoAdd: {
+      type: Boolean,
+      default: false
+    },
+    border: {
+      type: Boolean,
+      default: false
+    },
+    stripe: {
+      type: Boolean,
+      default: false
+    },
+    radius: {
+      type: Boolean,
+      default: false
+    },
+    pageSizeShow: {
+      type: Boolean,
+      default: false
+    },
+    paginationShow: {
+      type: Boolean,
+      default: false
+    },
+    couldEditStyle: {
+      type: Boolean,
+      default: false
+    }
   },
   data() {
     return {
@@ -298,11 +327,17 @@ export default {
       if (this.url == "") {
         this.selectedTabsPage = this.tableData;
         this.pagination.total = this.selectedTabsPage.length;
+        if (this.autoAdd) {
+          this.addRow();
+        }
       } else {
         this.getDataFromApi().then(
           data => {
             this.selectedTabsPage = JSON.parse(JSON.stringify(data.newArr));
             this.pagination.total = data.total;
+            if (this.autoAdd) {
+              this.addRow();
+            }
           },
           err => {
             console.log("失败" + err);
@@ -314,24 +349,13 @@ export default {
     getDataFromApi() {
       return new Promise((resolve, reject) => {
         const { page, rowsPerPage } = this.pagination;
-        this.all_url = `${this.url}?filterBy=${
-          this.searchNoName
-            ? this.search
-            : this.search && this.search.length > 0
-            ? "name," + this.search
-            : ""
-        }&itemsPerPage=${rowsPerPage}&page=${page}&sortBy=${
-          this.sortBy != null && this.sortBy.length != ""
-            ? this.sortBy
-            : "d,creationTimestamp"
-        }`;
+        this.all_url = `${this.url}`;
         this.$http
           .get(this.all_url)
           .then(response => {
             let newArr = response.data[this.rowprop];
             let total = response.data.listMeta.totalItems;
             resolve({ newArr, total });
-            this.$emit("userInfo", response.data);
           })
           .catch(function(response) {
             // this.loading = false;
@@ -389,7 +413,16 @@ export default {
     },
     // 表格编辑修改数据
     changeInputValue(val) {
+      // You can delete the row when the row of data is empty, but I didn't do that
+      // console.log(this.$refs.cesTable)
       this.selectedTabsPage[val.rowId][val.header] = val.inputValue;
+      if (
+        this.autoAdd &&
+        val.inputValue != "" &&
+        val.rowId + 1 == this.selectedTabsPage.length
+      ) {
+        this.addRow();
+      }
     },
     // 新增表格行
     addRow() {
@@ -415,13 +448,14 @@ export default {
 .ces-table .el-table colgroup.gutter {
   display: table-cell !important;
 }
-.ces-table .el-table tbody tr:nth-child(odd) {
-  background: #f8f9fd;
-}
 .ces-table .el-table td,
 .ces-table .el-table th.is-leaf {
   border-bottom: none !important;
 }
+.ces-table .el-table--border td,
+.ces-table .el-table th.is-leaf {
+  border-bottom: 1px solid #ebeef5 !important;
+}
 /* .ces-table .el-table--enable-row-hover, */
 .ces-table .el-table tbody tr:hover > td {
   background-color: #e4ecf8 !important;
@@ -458,10 +492,6 @@ em {
 .ces-table .el-table::before {
   background: #fff;
 }
-.ces-table .el-table .cell,
-.ces-table .el-table th div {
-  padding-right: 0 !important;
-}
 .ces-table .switchStyle .el-switch__label {
   position: absolute;
   display: none;
@@ -524,9 +554,15 @@ em {
 .ces-table .disture {
   color: #bcc1d0 !important;
 }
+.el-table__row--striped td {
+  background: #f8f9fd !important;
+}
 /* .el-table th>.cell {
   padding-left: 14px;
 } */
+.could_edit {
+  background-color: #5c82ff;
+}
 </style>
 <style scoped>
 .ces-table {
@@ -563,4 +599,7 @@ em {
 .ces_page_num_sel {
   width: 66px;
 }
+.table_radius {
+  border-radius: 10px;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/upload_file.vue b/src/components/upload_file.vue
new file mode 100644
index 0000000..6d4723d
--- /dev/null
+++ b/src/components/upload_file.vue
@@ -0,0 +1,211 @@
+<template>
+  <div>
+    <div v-if="!needCropper">
+      <el-upload
+        action="ssurl"
+        :file-list="fileArray"
+        :list-type="type=='picture'?'picture-card':''"
+        :limit="max"
+        :multiple="multiple"
+        :on-remove="handleRemove"
+        :on-success="handleAvatarSuccess"
+        :before-upload="beforeAvatarUpload"
+        :class="{hide:hideUpload || readOnly}"
+        :readOnly="readOnly"
+        :data="anotherData"
+      >
+        <el-button size="small" type="primary" v-if="type=='mp3'">上传文件</el-button>
+        <div slot="tip" class="el-upload__tip" v-if="type=='mp3'">支持文件格式：.mp3，单个文件不能超过20M。</div>
+        <i class="el-icon-plus" v-if="type=='picture'"></i>
+      </el-upload>
+    </div>
+    <div class="img_crop" v-else>
+      <div v-for="(item, index) in fileArray" :key="'img' + index" class="list_img">
+        <div v-if="!readOnly" @click="deleteImg(item, index)" class="list_img_back">
+          <i class="el-icon-delete img_del"></i>
+        </div>
+        <el-image class="list_img_item" :src="item.url" :fit="fit"></el-image>
+      </div>
+      <cropper v-if="fileArray.length <= max" @getNewUrl="getNewUrl"></cropper>
+    </div>
+  </div>
+</template>
+
+<script>
+import cropper from "@/components/cropper";
+export default {
+  components: {
+    cropper
+  },
+  data() {
+    return {
+      hideUpload: false,
+      fileArray: [],
+      anotherData: {}
+    };
+  },
+  props: {
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    max: {
+      type: Number,
+      default: 1
+    },
+    needCropper: {
+      type: Boolean,
+      default: false
+    },
+    list: {
+      type: Array,
+      default: []
+    },
+    type: {
+      type: String,
+      default: ""
+    },
+    readOnly: {
+      type: Boolean,
+      default: false
+    },
+    fit: {
+      type: String,
+      default: ""
+    }
+  },
+  watch: {
+    list(value) {
+      var getListImg = [];
+      if (value && value.length != 0) {
+        for (var i = 0; i < value.length; i++) {
+          getListImg.push({
+            name: value[i],
+            url: value[i]
+          });
+        }
+      }
+      this.fileArray = [...getListImg];
+      this.hideUpload = this.fileArray.length >= this.max;
+    }
+  },
+  methods: {
+    beforeAvatarUpload(file) {
+      if (this.type == "mp3") {
+        const isMP3 = file.type === "audio/mp3";
+        const isLt10M = file.size / 1024 / 1024 < 20;
+        if (!isMP3) {
+          this.$message.error("只支持 MP3 格式!");
+        }
+        if (!isLt10M) {
+          this.$message.error("上传 MP3 文件大小不能超过 20MB!");
+        }
+        return isMP3 && isLt10M;
+      } else if (this.type == "picture") {
+        const isJPG = file.type === "image/jpeg" || file.type === "image/png";
+        const isLt10M = file.size / 1024 / 1024 < 10;
+        if (!isJPG) {
+          this.$message.error("上传图片只能是 JPG 和 PNG 格式!");
+        }
+        if (!isLt10M) {
+          this.$message.error("上传图片大小不能超过 10MB!");
+        }
+        return isJPG && isLt10M;
+      }
+    },
+    handleAvatarSuccess(response, file, fileList) {
+      // 上传图片
+      if (this.type == "mp3") {
+        if (response.success == 1) {
+          this.fileArray.push({
+            url: response.data.dbUrl,
+            name: response.data.fileName
+          });
+        }
+        this.$emit("getNewList", this.fileArray);
+      } else if (this.type == "picture") {
+        if (response.success == 1) {
+          this.fileArray.push({
+            url: response.data.dbUrl,
+            name: response.data.fileName
+          });
+        }
+        this.$emit("getNewList", this.fileArray);
+      }
+      this.hideUpload = fileList.length >= this.max;
+    },
+    handleRemove(file, fileList) {
+      let url = file.url;
+      let detection = true;
+      // 等于 true 说明是刚刚上传的
+      // 判断方法有很多 随便用一种。
+      if (url) detection = url.indexOf("blob") != -1;
+      if (detection) {
+        this.fileArray.forEach((item, i, arr) => {
+          if (item.url === file.response.data.dbUrl) {
+            this.fileArray.splice(i, 1);
+          }
+        });
+      } else {
+        this.fileArray.forEach((item, i, arr) => {
+          if (item.url === file.url) {
+            this.fileArray.splice(i, 1);
+          }
+        });
+      }
+      this.hideUpload = fileList.length >= this.max;
+      this.$emit("getNewList", this.fileArray);
+    },
+    getNewUrl(val) {
+      this.fileArray.push({ name: val, url: val });
+      this.$emit("getNewList", this.fileArray);
+    },
+    deleteImg(item, index) {
+      this.fileArray.splice(index, 1);
+      this.$emit("getNewList", this.fileArray);
+    }
+  }
+};
+</script>
+ <style>
+.hide .el-upload--picture-card {
+  display: none;
+}
+</style>
+<style scoped>
+.list_img {
+  width: 100px;
+  height: 100px;
+  border-radius: 5px;
+  overflow: hidden;
+  margin-left: 10px;
+  position: relative;
+  cursor: pointer;
+}
+.list_img_back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  z-index: 1;
+  opacity: 0;
+}
+.list_img:hover .list_img_back {
+  opacity: 0.5;
+}
+.list_img_item {
+  width: 100%;
+  height: 100%;
+}
+.img_crop {
+  display: flex;
+  align-items: center;
+}
+.img_del {
+  position: absolute;
+  top: calc((100% - 24px) / 2);
+  left: calc((100% - 24px) / 2);
+  color: #fff;
+  font-size: 24px;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/table_example.vue b/src/pages/table_example.vue
index 852e542..822b90a 100644
--- a/src/pages/table_example.vue
+++ b/src/pages/table_example.vue
@@ -1,13 +1,16 @@
 <template>
-  <div class="index_container">
-    <div style="height: 100px"></div>
+  <div class="tab_ex_container">
+    <div style="height: 60px"></div>
+    <h3>常规表格</h3>
     <ces-table
       class="r_yhgl_table"
       size="mini"
+      :border="false"
       :headers="headers"
       :url="url"
       :searchShow="true"
       :addRowBtn="addRowBtn"
+      :autoAdd="true"
       :isDialog="true"
       :isSelection="true"
       :isIndex="true"
@@ -15,6 +18,30 @@
       :detailsUrl="detailsUrl"
       @primary-edit="editItem"
       :emptyText="emptyText"
+      :stripe="true"
+      :pageSizeShow="true"
+    ></ces-table>
+    <h3>可编辑表格，供服务测试用</h3>
+    <ces-table
+      class="r_yhgl_table"
+      size="mini"
+      :border="true"
+      :headers="headers1"
+      :url="url"
+      :searchShow="false"
+      :addRowBtn="false"
+      :autoAdd="true"
+      :isDialog="false"
+      :isSelection="false"
+      :isIndex="true"
+      :confirmOptions="confirmOptions"
+      :detailsUrl="detailsUrl"
+      :radius="true"
+      @primary-edit="editItem"
+      :emptyText="emptyText"
+      :stripe="false"
+      :paginationShow="false"
+      :pageSizeShow="false"
     ></ces-table>
   </div>
 </template>
@@ -25,8 +52,8 @@ export default {
   data: () => ({
     headers: [
       { label: "服务url", prop: "date", type: "href", align: "left" },
-      { label: "服务名称", prop: "name", type: "input", align: "center" },
-      { label: "中文名", prop: "address", type: "input", align: "right" },
+      { label: "服务名称", prop: "name", type: "href", align: "center" },
+      { label: "中文名", prop: "address", type: "href", align: "right" },
       {
         label: "操作",
         type: "Button",
@@ -44,16 +71,21 @@ export default {
         ]
       }
     ],
+    headers1: [
+      { label: "服务url", prop: "date", type: "input", align: "center" },
+      { label: "服务名称", prop: "name", type: "input", align: "center" },
+      { label: "中文名", prop: "address", type: "input", align: "center" },
+    ],
     url: "",
     detailsUrl: "ss/",
     addRowBtn: true,
     confirmOptions: {
-        title: "提示", //提示
-        message: "确认删除该条数据？", //""
-        btnCancelText: "取消", //取消
-        btnSubmitText: "确定" //确定
-      },
-      emptyText: "暂时没数据"
+      title: "提示", //提示
+      message: "确认删除该条数据？", //""
+      btnCancelText: "取消", //取消
+      btnSubmitText: "确定" //确定
+    },
+    emptyText: "暂时没数据"
   }),
   components: {
     cesTable
@@ -67,8 +99,9 @@ export default {
 </script>
 
 <style scoped>
-.index_container {
-  height: 100%;
+.tab_ex_container {
+  padding: 20px 0;
+  margin-top: 84px;
   overflow-x: hidden;
   overflow-y: auto;
 }
diff --git a/src/pages/upload_example.vue b/src/pages/upload_example.vue
index d6665b7..67f767a 100644
--- a/src/pages/upload_example.vue
+++ b/src/pages/upload_example.vue
@@ -1,34 +1,73 @@
 <template>
-  <div>
-    <update-file
+  <div class="up_ex_container">
+    <h3>带有裁剪功能的图片上传</h3>
+    <upload-file
       :multiple="false"
-      :max="1"
-      :list="imgList1"
-      @getUrl="getImgList1"
-    ></update-file>
+      :max="4"
+      :needCropper="true"
+      type="cropper"
+      :readOnly="false"
+      :list="imgList"
+      @getNewList="getNewList"
+    ></upload-file>
+    <h3>element的图片上传</h3>
+    <upload-file
+      :multiple="false"
+      :max="4"
+      :needCropper="false"
+      type="picture"
+      :readOnly="false"
+      fit="fill"
+      :list="imgList"
+      @getNewList="getNewList"
+    ></upload-file>
+    <h3>其他类型的文件上传，</h3>
+    <upload-file
+      :multiple="false"
+      :max="4"
+      :needCropper="false"
+      type="mp3"
+      :readOnly="false"
+      fit="fill"
+      :list="imgList"
+      @getNewList="getNewList"
+    ></upload-file>
   </div>
 </template>
 
 <script>
-import updateFile from "../components/updatefile";
+import uploadFile from "@/components/upload_file";
 export default {
   data() {
     return {
-      imgList1: []
+      imgList: [],
+      imgList1: [
+        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
+        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+      ]
     };
   },
-  mounted() {},
+  mounted() {
+    setTimeout(() => {
+      this.imgList = this.imgList1;
+    }, 1000);
+  },
   methods: {
-    getImgList1(url) {
-      this.form.pic_path = url
-        .map((v, k) => {
-          return this.tranlateUrl(v.url);
-        })
-        .join(",");
+    // get a new file list as an array
+    getNewList(val) {
+      console.log(val);
     }
   },
   components: {
-    updateFile
+    uploadFile
   }
 };
 </script>
+<style scoped>
+.up_ex_container {
+  padding: 20px 0;
+  margin-top: 84px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+</style>
\ No newline at end of file
-- 
2.26.0