pref:修改模块上传

base-manager-ui/admin/src/pages/basicset/deploy/deploy.vue

@@ -150,6 +150,24 @@
               prop="modelIcon"
             >
               <a-upload
+                name="file"
+                list-type="picture-card"
+                :action="api + 'base/file/commonupload'"
+                :file-list="fileList"
+                @change="handleUpload"
+                :accept="accept"
+                :before-upload="beforeUpload"
+                @preview="handlePreview"
+              >
+                <div v-if="fileList.length < 1">
+                  <a-icon type="plus" />
+                  <div class="ant-upload-text">
+                    点击上传
+                  </div>
+                </div>
+              </a-upload>
+
+              <!-- <a-upload
                 name="file"
                 list-type="picture-card"
                 :action="api + 'base/file/commonupload'"
@@ -168,7 +186,7 @@
                   <a-icon :type="loading ? 'loading' : 'plus'" />
                   <div class="ant-upload-text">点击上传</div>
                 </div>
-              </a-upload>
+              </a-upload> -->
             </a-form-model-item>
           </a-col>
         </a-row>
@@ -190,12 +208,18 @@
           </a-col>
         </a-row>
       </a-form-model>
+      <!-- 预览 -->
+      <PrevieModal
+        :previewData="previewData"
+        :previewVisible.sync="previewVisible"
+      ></PrevieModal>
     </a-modal>
   </div>
 </template>
 
 <script>
 import { modelList, addMode, delMode } from "@/services/basicsetFun";
+import PrevieModal from "@/components/PrevieModal.vue";
 const columns = [
   {
     title: "序号",
@@ -245,10 +269,15 @@ const columns = [
   },
 ];
 export default {
+  components: {
+    PrevieModal,
+  },
   data() {
     return {
       api: process.env.VUE_APP_API_BASE_URL + "/",
       accept: "image/jpeg,image/png,image/svg+xml", // 上传类型
+      previewData: {}, // 预览
+      previewVisible: false,
       columns,
       loading: true,
       title: "新增模块",
@@ -335,6 +364,17 @@ export default {
     // 编辑
     handleEdit(row) {
       this.formData = { ...row };
+      if (this.formData.modelIcon) {
+        this.fileList = [
+          {
+            uid: -1,
+            status: "done",
+            name: this.formData.modelIcon,
+            url: this.api + this.formData.modelIcon,
+            url2: this.formData.modelIcon,
+          },
+        ];
+      }
       this.visible = true;
     },
     // 删除
@@ -389,17 +429,23 @@ export default {
     },
     // 重置
     handleReset() {
+      this.fileList = [];
       this.$refs.ruleForm.resetFields();
     },
     // 上传图标
-    handleUpload(info) {
-      if (info.file.status === "uploading") {
-        this.loading = true;
-        return;
-      }
-      if (info.file.status === "done") {
-        this.formData.modelIcon = info.file.response.url;
-        this.loading = false;
+    handleUpload({ fileList }) {
+      this.fileList = [...fileList].slice(-1);
+      this.fileList = this.fileList.map((v) => {
+        if (v.response) {
+          v.url2 = v.response.url;
+          v.url = this.api + v.response.url;
+        }
+        return v;
+      });
+      if (this.fileList[0]) {
+        this.formData.modelIcon = this.fileList[0].url2;
+      } else {
+        this.formData.modelIcon = "";
       }
     },
     // 上传限制
@@ -411,11 +457,19 @@ export default {
       if (!isJpgOrPng) {
         this.$message.error("请上传jpeg,svg,png格式图片!");
       }
-      const isLt2M = file.size / 1024 / 1024 < 2;
-      if (!isLt2M) {
-        this.$message.error("上传图片大小不能超过 2MB!");
+      const isLt10M = file.size / 1024 / 1024 < 10;
+      if (!isLt10M) {
+        this.$message.error("上传图片大小不能超过 10MB!");
       }
-      return isJpgOrPng && isLt2M;
+      return isJpgOrPng && isLt10M;
+    },
+    // 预览
+    handlePreview(info) {
+      this.previewData = {
+        type: "img",
+        url: info.url,
+      };
+      this.previewVisible = true;
     },
 
     // 关闭对话框

base-manager-ui/admin/src/pages/basicset/site/components/addsite.vue

@@ -661,7 +661,8 @@ export default {
     },
     // 上传图片
     handleChange({ fileList }) {
-      this.fileList = fileList.map((v) => {
+      this.fileList = [...fileList].slice(-1);
+      this.fileList = this.fileList.map((v) => {
         if (v.response) {
           v.url2 = v.response.url;
           v.url = this.api + v.response.url;
@@ -713,8 +714,10 @@ export default {
           })
             .then((res) => {
               let { location } = res.geocodes[0];
-              [this.formInfo.longitude, this.formInfo.latitude] =
-                location.split(",");
+              [
+                this.formInfo.longitude,
+                this.formInfo.latitude,
+              ] = location.split(",");
             })
             .catch(() => {
               this.$message.error("经纬度获取失败，请输入正确的地址");
@@ -811,4 +814,4 @@ export default {
     margin-bottom: 6px;
   }
 }
-</style>
\ No newline at end of file
+</style>