图片上传

src/views/nrgl/toolsManage.vue

@@ -2,7 +2,7 @@
  * @Author: 赵鹏龙
  * @Date: 2021-09-07 11:59:56
  * @LastEditors: 赵鹏龙
- * @LastEditTime: 2021-09-07 17:40:11
+ * @LastEditTime: 2021-09-07 21:05:07
  * @Description: 工具管理
 -->
 <template>
@@ -23,7 +23,7 @@
 
       <el-table-column label="图片" width="180" align="center">
         <template slot-scope="scope">
-          <img :src="scope.row.imgUrl" alt="" />
+          <img :src="scope.row.photo" alt="" />
         </template>
       </el-table-column>
 
@@ -65,6 +65,7 @@
         :http-request="uploadSectionFile"
         :on-preview="handlePictureCardPreview"
         :on-remove="handleRemove"
+        :file-list="fileList"
       >
         <i class="el-icon-plus"></i>
       </el-upload>
@@ -86,6 +87,8 @@
 
 <script>
 import $axios from "axios";
+let imgBase64 =
+  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAWCAYAAADAQbwGAAAC8klEQVQ4T72UTWhUZxSGn/Pdm5uZiU0TE8VRo6WK1Z2bUIw/BUGk0k27yUqU+kNTVEwrUUEx0EjdKCpiheAPWty68ycRxSpWURAEC2mr1GSEiTrRNCYzk7n3O3LvRNtAIo6CZ3m5PLzfec/7SncHP4qwHpisioqhpFELIgjwWC3t0tNJFzAs8BtC1iolIY1gUeIKSwAvBPYL/OoHtOXyvKipKUkgmQx4kHATbBFljfRcpA/laJmldcpyBkvDFf/Wy8RSPluBDRFQlRPxOLsmLWLgXYDpC1T4wlYVmj4M8K+zVFaUUx0EeFYIskM8CZXHE0wyiuM4DGctz2ctoz/8Pq7C2k4GUwv4FMNaYLEK1QJPUfZEqxC2KdQa5ZkK1wM4NvMaXb0NxEc/2XI8nqA1nyOpyj6gDrii0G2UAYVLRR5LFT5GmA4sUiXtuDQ7BVIFoQXh+6LLlvYyZa9v2KjwJZad/hC/++VkZ79AgWDELOfvCYibJ+59RL21tInQYVwO2IAmVTYVTbEcETgOHEG4NTjE7s+mkXuYod6FqZiRY1fUKr1107hx7w+8qipa1LDQE9YXAhpVaC4C4Rf1OS0OJxGO1lXR/ug5lar8DHwBo9JzM2/5YZZHX6rAaoTvHFhpla//A/5fIdyOJWirjb2Fwuro9hpChfmARnml8PUOhQ0KKzDs8B1u8A+5TyqwY+3QJKg3UtxhtsDBmEuTyKukjLj8bz9Jz2Nf6KJargr0CPSP5zJK2rg05wLS5dBqlcZRSTnUyeDqBua4hm8VGgSqgcx4d+jAseQ1utKfU+O7HEaYO2b0MmepzJeQlFQH861wWuDOe2e55zwT1WGnwFcibH+v+opgwipj2Ixwxhlmd1SwKKcKWX6KGQaMF9X5uFMW4DxziMWEqTaEwTcKtyy0zFzGgxD4J5BDOQdRwTpj0gQVxYRZVkiKMA8oV7hAgf0zVnA/ynt3J1tEWIdSI2A16oA3TiFyHu5K+EyPK8klxXoL5yUbsJv2ONTnUQAAAABJRU5ErkJggg==";
 export default {
   data() {
     return {
@@ -93,22 +96,22 @@ export default {
         {
           name: "王小虎",
           path: "http://localhost:8080/#/toolManage",
-          imgUrl: require("@/assets/img/bg.png")
+          imgUrl: imgBase64
         },
         {
           name: "王小虎",
           path: "http://localhost:8080/#/toolManage2",
-          imgUrl: require("@/assets/img/bg.png")
+          imgUrl: imgBase64
         },
         {
           name: "王小虎",
           path: "http://localhost:8080/#/toolManage3",
-          imgUrl: require("@/assets/img/bg.png")
+          imgUrl: imgBase64
         },
         {
           name: "王小虎",
           path: "http://localhost:8080/#/toolManage4",
-          imgUrl: require("@/assets/img/bg.png")
+          imgUrl: imgBase64
         }
       ],
       // 控制嵌套表单显示隐藏
@@ -121,13 +124,28 @@ export default {
       dialogImageUrl: "",
       dialogVisible: false,
       imgFile: "",
-      changeFlag: false
+      changeFlag: false,
+      changeId: "",
+      fileList: []
     };
   },
   mounted() {
     this.getData();
   },
   methods: {
+    postRequest(url, data) {
+      const headers = {
+        "content-Type": "application/json"
+      };
+      $axios
+        .post(url, data, { headers: headers })
+        .then(function(res) {
+          return res;
+        })
+        .catch(function(err) {
+          console.log(err);
+        });
+    },
     /**
      * @description: 得到全部数据
      * @param {*}
@@ -155,13 +173,32 @@ export default {
           console.log(err);
         });
     },
+    /**
+     * @description: 点击编辑按钮
+     * @param {*} index
+     * @param {*} row
+     * @return {*}
+     * @author: 赵鹏龙
+     */
 
     handleEdit(index, row) {
       this.form.name = row.name;
       this.form.path = row.path;
       this.dialogFormVisible = true;
-      this.changeFlag = true;
+      this.changeFlag = true; // 确保是修改
+      this.changeId = row.id;
+      this.fileList = [];
+      this.fileList.push({ url: row.photo });
+      console.log(row);
     },
+    /**
+     * @description: 删除操作
+     * @param {Number} index
+     * @param {Obj} row
+     * @return {*}
+     * @author: 赵鹏龙
+     */
+
     handleDelete(index, row) {
       console.log(index, row);
       let self = this;
@@ -184,13 +221,39 @@ export default {
           console.log(err);
         });
     },
+    /**
+     * @description: 自定义的上传图片时候的方法
+     * @param {Obj} params
+     * @return {*}
+     * @author: 赵鹏龙
+     */
+
     uploadSectionFile(params) {
       const formData = new FormData();
       formData.append("file", params.file);
-      this.imgFile = formData.get("file");
+      this.imageToBase64(formData.get("file"));
       console.log(this.imgFile);
     },
     /**
+     * @description: 将图片转换成 base64
+     * @param {File} file
+     * @return {*}
+     * @author: 赵鹏龙
+     */
+
+    imageToBase64(file) {
+      let reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => {
+        console.log("file 转 base64结果：" + reader.result);
+        let iconBase64 = reader.result;
+        this.imgFile = iconBase64;
+      };
+      reader.onerror = function(error) {
+        console.log("Error: ", error);
+      };
+    },
+    /**
      * @description: 添加常用工具
      * @param {*}
      * @return {*}
@@ -201,6 +264,8 @@ export default {
       this.form.name = "";
       this.form.path = "";
       this.dialogFormVisible = true;
+      this.changeFlag = false; // 确保是新增
+      this.fileList = []; // 复用添加 dialog
     },
     /**
      * @description: 添加工具
@@ -210,15 +275,8 @@ export default {
      */
 
     addTools() {
+      console.log(this.imgFile);
       let self = this;
-      let formData = new FormData();
-      formData.append("prentId", "0");
-      formData.append("name", self.form.name);
-      formData.append("path", self.form.path);
-      formData.append("type", "gj");
-      formData.append("imgUrl", "123");
-      formData.append("sort", "123");
-      formData.append("photo", self.imgFile);
       const headers = {
         "content-Type": "application/json"
       };
@@ -230,7 +288,7 @@ export default {
             name: self.form.name,
             path: self.form.path,
             type: "gj",
-            imgUrl: "123",
+            imgUrl: "",
             sort: "123",
             photo: self.imgFile
           },
@@ -245,8 +303,16 @@ export default {
           console.log(err);
         });
     },
+    /**
+     * @description:修改
+     * @param {*}
+     * @return {*}
+     * @author: 赵鹏龙
+     */
 
     changeTools() {
+      console.log(this.imgFile);
+      let self = this;
       const headers = {
         "content-Type": "application/json"
       };
@@ -254,10 +320,11 @@ export default {
         .post(
           "/hy/updataById",
           {
-            id: row.id,
+            id: self.changeId,
             prentId: "0",
             name: self.form.name,
             path: self.form.path,
+            photo: self.imgFile,
             type: "gj",
             imgUrl: "",
             sort: "123"
@@ -265,7 +332,8 @@ export default {
           { headers: headers }
         )
         .then(function(res) {
-          self.tableData = res.data.list;
+          console.log(res);
+          self.dialogFormVisible = false;
           self.getData();
         })
         .catch(function(err) {

vue.config.js

@@ -2,7 +2,7 @@
  * @Author: 赵鹏龙
  * @Date: 2021-09-03 10:45:36
  * @LastEditors: 赵鹏龙
- * @LastEditTime: 2021-09-07 10:04:29
+ * @LastEditTime: 2021-09-07 19:45:02
  * @Description:
  */
 const path = require("path");
@@ -65,7 +65,7 @@ module.exports = {
       //   }
       // },
       "/hy": {
-        target: "http://172.16.240.20:9040/", //统一的请求头部每次修改都要重启才会生效 http://39.99.224.27:8006/
+        target: "http://192.168.137.200:9040/", //统一的请求头部每次修改都要重启才会生效 http://39.99.224.27:8006/
         ws: true,
         changeOrigin: true,
         pathRewrite: {