上传图片

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);