图片组件上传功能优化

zhangzzzz
1 parent 69aeb7b4
Showing 2 changed files with 60 additions and 80 deletions
src/api/file.js
src/views/bigscreenDesigner/designer/components/customUploadNew.vue
@@ -55,4 +55,12 @@ export function fileDetail(data) {
   })
 }
  
-export default { fileList, fileAdd, fileDel, fileUpdate, fileDetail }
+export function getFielList() {
+  return request({
+    url: '/file/getFielList',
+    method: 'get'
+  })
+}
+
+
+export default { fileList, fileAdd, fileDel, fileUpdate, fileDetail, getFielList }
@@ -3,18 +3,16 @@
     <el-input clearable v-model.trim="uploadImgUrl" size="mini" @change="changeInput">
       <template slot="append">
         <i class="iconfont iconfolder-o" @click="dialogVisible = true"></i>
-        <!-- <input type="file" class="file" ref="files" @change="getImages" /> -->
       </template>
     </el-input>
  
  
     <!-- 弹窗 -->
     <el-dialog title="图库" :visible.sync="dialogVisible">
-      <el-upload class="upload-demo" :on-change="changeInput">
-        <el-button size="medium" type="info" icon="el-icon-upload2">点击上传</el-button>
-      </el-upload>
+      <el-button size="medium" type="info" icon="el-icon-upload2" @click="uploadHandler">点击上传</el-button>
+      <input type="file" class="file" ref="files" @change="getImages" />
       <div class="image-list">
-        <el-image class="image" v-for="url in urls" :key="url" :src="url" lazy></el-image>
+        <el-image class="image" v-for="item in fileList" :key="item.fileId" :src="item.urlPath" lazy></el-image>
       </div>
     </el-dialog>
  
@@ -26,6 +24,7 @@
 <script>
 import axios from "axios";
 import { getToken } from "@/utils/auth";
+import { getFielList } from "@/api/file"
 export default {
   name: 'custom-upload-new',
   model: {
@@ -41,42 +40,6 @@ export default {
   data() {
     return {
       dialogVisible: false, // 弹窗状态
-      urls: [
-        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
-        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
-        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
-        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
-        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
-        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
-        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
-        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
-        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
-        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
-        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
-        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
-        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
-        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
-        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
-        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
-        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
-        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
-        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
-        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
-        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
-        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
-        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
-        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
-        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
-        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
-        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
-        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
-        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
-        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
-        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
-        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
-        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
-      ],
-
       requestUrl: process.env.BASE_API + "/file/upload",
       headers: {
         Authorization: getToken()
@@ -85,64 +48,65 @@ export default {
       uploadImgUrl: ""
     };
   },
-  created() {
+  async created() {
     this.uploadImgUrl = this.value;
+    const rs = await getFielList();
+    if (rs.code === 200 || rs.code === "200") {
+      this.fileList = rs.data;
+    }
   },
   methods: {
-    openDialog() {
-      console.log(12313123213)
+    uploadHandler() {
+      this.$refs.files.click();
     },
-
-
-
     getImages(el) {
-      let file = el.target.files[0];
-      let type = file.type.split("/")[0];
+      const file = el.target.files[0];
+      const type = file.type.split("/")[0];
       if (type === "image") {
         this.upload(file);
       } else {
-        this.$message.warn("只能上传图片格式");
+        this.$message.warning("只能上传图片格式")
       }
     },
-    upload(imgUrl) {
+    upload(file) {
       let that = this;
-      console.log(that.headers);
       let formdata = new FormData();
-      formdata.append("file", imgUrl);
-      axios
-        .post(this.requestUrl, formdata, {
-          headers: that.headers
-        })
-        .then(response => {
-          let res = response.data;
-          if (res.code == "200") {
-            that.uploadImgUrl = res.data.urlPath;
-            that.$emit("input", that.uploadImgUrl);
-            that.$emit("change", that.uploadImgUrl);
-          }
-        });
+      formdata.append("file", file);
+      // axios
+      //   .post(this.requestUrl, formdata, {
+      //     headers: that.headers
+      //   })
+      //   .then(response => {
+      //     let res = response.data;
+      //     if (res.code === "200") {
+      //       that.uploadImgUrl = res.data.urlPath;
+      //       that.$emit("input", that.uploadImgUrl);
+      //       that.$emit("change", that.uploadImgUrl);
+      //     }
+      //   });
     },
     changeInput(e) {
-      if (e) {
-        this.uploadImgUrl = e;
-      } else {
-        this.$refs.files.value = "";
-        this.uploadImgUrl = "";
-      }
-      this.$emit("input", this.uploadImgUrl);
-      this.$emit("change", this.uploadImgUrl);
+      // if (e) {
+      //   this.uploadImgUrl = e;
+      // } else {
+      //   this.$refs.files.value = "";
+      //   this.uploadImgUrl = "";
+      // }
+      // this.$emit("input", this.uploadImgUrl);
+      // this.$emit("change", this.uploadImgUrl);
     }
   }
 };
 </script>
 <style lang="scss" scoped>
 .file {
-  position: absolute;
-  width: 100%;
-  padding: 100%;
-  right: 0;
-  top: 0;
-  opacity: 0;
+  // position: absolute;
+  // width: 100%;
+  // padding: 100%;
+  // right: 0;
+  // top: 0;
+  // opacity: 0;
+  display: none;
 }
  
 /deep/.el-input-group__append,
@@ -188,6 +152,14 @@ export default {
  
   .image {
     width: 20%;
+    padding: 0 0.5px 0 0.5px;
+    min-height: 90px;
+
+    /deep/ .el-image__error {
+      width: 100%;
+      height: 100%;
+      min-height: 90px;
+    }
   }
 }
 </style>