update 图片上传

jsowell-ui/src/components/MapContainer/MapContainer.vue

@@ -17,20 +17,7 @@
 
       <div id="container"></div>
     </div>
-    <div>上传图片</div>
-    <el-upload
-      action="http://localhost:8080/common/uploadOSS"
-      :headers="headers"
-      list-type="picture-card"
-      :on-preview="handlePictureCardPreview"
-      :on-remove="handleRemove"
-      :on-success="handleSuccess"
-    >
-      <i class="el-icon-plus"></i>
-    </el-upload>
-    <el-dialog :visible.sync="dialogVisible">
-      <img width="100%" :src="dialogImageUrl" alt="">
-    </el-dialog>
+
 
 <!--    <div class="img">-->
 <!--      <el-input-->
@@ -77,26 +64,11 @@ export default {
       placeSearch: "",
       stationId: this.$route.params.id,
       avatar: "",
-      headers: {
-        Authorization: "Bearer " + getToken()
-      },
-      imageUrl: null
+
     };
   },
   methods: {
-    handleSuccess(res, file) {
-      this.imageUrl = URL.createObjectURL(file.raw);
-      console.log("图片上传成功 url：", this.imageUrl);
-      console.log("图片上传成功 res：", res);
-    },
-    handleRemove(file, fileList) {
-      console.log(file, fileList);
-    },
-    handlePictureCardPreview(file) {
-      this.dialogImageUrl = file.url;
-      console.log(this.dialogImageUrl)
-      this.dialogVisible = true;
-    },
+
     // 点击搜索按钮
     send() {
       this.searchPlaceInput = this.inputObject.userInput;

jsowell-ui/src/views/pile/station/components/SiteInfo.vue

@@ -1,5 +1,19 @@
 <template>
   <div class="app-container">
+    <div>上传图片</div>
+    <el-upload
+      action="http://localhost:8080/common/uploadOSS"
+      :headers="headers"
+      list-type="picture-card"
+      :on-preview="handlePictureCardPreview"
+      :on-remove="handleRemove"
+      :on-success="handleSuccess"
+    >
+      <i class="el-icon-plus"></i>
+    </el-upload>
+    <el-dialog :visible.sync="dialogVisible">
+      <img width="100%" :src="dialogImageUrl" alt="">
+    </el-dialog>
     <el-form
       :label-position="labelPosition"
       label-width="120px"
@@ -174,11 +188,17 @@ import {
 } from "@/api/pile/station.js";
 import bus from "@/bus/bus";
 import { regionData} from "element-china-area-data";
+import {getToken} from "@/utils/auth";
 
 export default {
   dicts: ["station_type", "match_cars", "construction_type"],
   data() {
     return {
+      headers: {
+        Authorization: "Bearer " + getToken()
+      },
+      imageUrl: null,
+      dialogImageUrl:'',
       options: regionData,
       labelPosition: "right",
       station: {
@@ -197,6 +217,7 @@ export default {
         stationStatus: "",
         construction: "",
         businessHours: "",
+        pictures: "",
       },
       stationId: this.$route.params.id,
       publicFlagOptions: [
@@ -269,12 +290,27 @@ export default {
           { required: true, message: "请输入营业时间", trigger: "blur" },
         ],
       },
+      pictureList: [],
     };
   },
   created() {
 
   },
   methods: {
+    handleSuccess(res, file) {
+      this.imageUrl = URL.createObjectURL(file.raw);
+      console.log("图片上传成功 url：", this.imageUrl);
+      console.log("图片上传成功 res：", res);
+      this.pictureList.push(res.url);
+    },
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePictureCardPreview(file) {
+      this.dialogImageUrl = file.url;
+      console.log(this.dialogImageUrl)
+      this.dialogVisible = true;
+    },
     handleChange() {
       console.log("111");
     },
@@ -283,15 +319,14 @@ export default {
       const res = await getStationInfo(this.stationId);
       console.log(res);
       this.station = res.data;
+      this.pictureList = this.station.pictures.split(',');
       console.log("queryStationInfo表格数据", this.station);
     },
     // 提交按钮
     present() {
-      // console.log("matchCars提交时：", this.station.matchCars);
-      // console.log("selectMatchCars提交时：", this.station.selectMatchCars);
-
       // 赋值
       this.station.matchCars = this.station.selectMatchCars.join(",");
+      this.station.pictures = this.pictureList.join(',');
       // console.log("matchCars赋值后：", this.station.matchCars);
       this.$refs.stationRef.validate((valid) => {
         if (valid) {