From d3ba89aeb480fd20c415f869e49afa67051391f4 Mon Sep 17 00:00:00 2001
From: JS-LM <2497833386@QQ.com>
Date: Sun, 23 Apr 2023 14:42:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/MapContainer/MapContainer.vue  | 50 +++++++++++++++----
 1 file changed, 39 insertions(+), 11 deletions(-)

diff --git a/jsowell-ui/src/components/MapContainer/MapContainer.vue b/jsowell-ui/src/components/MapContainer/MapContainer.vue
index c5b155a46..29b1519c1 100644
--- a/jsowell-ui/src/components/MapContainer/MapContainer.vue
+++ b/jsowell-ui/src/components/MapContainer/MapContainer.vue
@@ -16,17 +16,31 @@
 
       <div id="container"></div>
     </div>
-    <div class="img">
-      <el-input
-        placeholder="请选择图片"
-        style="width: 50%"
-        type="file"
-        @change="onFileChange"
-        ref="iptRef"
-      ></el-input
-      >
-      <el-button style="width: 85px">上传图片</el-button>
-    </div>
+    <div>上传图片</div>
+    <el-upload
+      action="https://jsonplaceholder.typicode.com/posts/"
+      list-type="picture-card"
+      :on-preview="handlePictureCardPreview"
+      :on-remove="handleRemove"
+    >
+<!--      :headers="headers"-->
+      <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-->
+<!--        placeholder="请选择图片"-->
+<!--        style="width: 50%"-->
+<!--        type="file"-->
+<!--        @change="onFileChange"-->
+<!--        ref="iptRef"-->
+<!--      ></el-input-->
+<!--      >-->
+<!--&lt;!&ndash;      <el-button style="width: 85px">上传图片</el-button>&ndash;&gt;-->
+<!--    </div>-->
   </div>
 </template>
 
@@ -41,6 +55,11 @@ window._AMapSecurityConfig = {
 export default {
   data() {
     return {
+      dialogImageUrl: '',
+      dialogVisible: false,
+      // headers:{
+      //   Authorization:this.$store.state.user.token
+      // },
       map: null,
       autoOptions: {
         input: "",
@@ -58,6 +77,14 @@ export default {
     };
   },
   methods: {
+    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;
@@ -160,6 +187,7 @@ export default {
       });
     },
     onFileChange(e) {
+      console.log(e,'上传图片')
       // 1.获取用户选择的文件列表
       const fileList = e.target.files;
       console.log(fileList);