修改企业头像上传

src/views/biz/enterprise/index.vue

@@ -55,26 +55,21 @@
                 >
                     <a-row
                         type="flex"
-                        justify="space-between"
-                        align="start"
+                        justify="start"
+                        align="middle"
                     >
                         <!-- 头像 -->
                         <a-col :span="4">
+                            
                             <a-avatar
-                                v-if="!record.logoUrl || record.logoUrl  == ''"
-                                shape="square"
-                                :size="64"
-                                icon="user"
-                            />
-                            <a-avatar
-                                v-if="record.logoUrl && record.logoUrl != ''"
                                 shape="square"
                                 :size="64"
-                                :src="record.logoUrl"
+                                :src="record.logoUrl && record.logoUrl != '' ? record.logoUrl : ''"
+                                :icon="!record.logoUrl || record.logoUrl  == '' ? 'user' : ''"
                             />
                         </a-col>
                         <!-- 企业名称 -->
-                        <a-col :span="20">
+                        <a-col>
                             <span style="margin: 10px;">{{record.name}}</span>
                         </a-col>
                     </a-row>
@@ -86,26 +81,22 @@
                 >
                     <a-row
                         type="flex"
-                        justify="space-between"
+                        justify="start"
                         align="middle"
                     >
                         <!-- 头像 -->
                         <a-col :span="4">
+                            
                             <a-avatar
-                                v-if="!record.adminAvatarUrl || record.adminAvatarUrl  == ''"
+                                v-if=""
                                 shape="square"
                                 :size="64"
-                                icon="user"
-                            />
-                            <a-avatar
-                                v-if="record.adminAvatarUrl && record.adminAvatarUrl != ''"
-                                shape="square"
-                                :size="64"
-                                :src="record.adminAvatarUrl"
+                                :src="record.adminAvatarUrl && record.adminAvatarUrl != '' ? record.adminAvatarUrl : ''"
+                                :icon="!record.adminAvatarUrl || record.adminAvatarUrl  == '' ? 'user' : ''"
                             />
                         </a-col>
                         <!-- 管理员姓名、昵称，注册时间 -->
-                        <a-col :span="20">
+                        <a-col>
                             <a-space
                                 direction="vertical"
                                 align="start"
@@ -173,24 +164,42 @@
                         label="企业LOGO"
                         prop="logoUrl"
                     >
-                        <a-avatar
-                            v-if="!formModel.logoUrl || formModel.logoUrl  == ''"
+                        <a-upload
+                          name="avatarUpload"
+                          list-type="picture-card"
+                          class="avatar-uploader"
+                          :show-upload-list="false"
+                          :before-upload="beforeUpload"
+                          @change="handleUpload"
+                          :customRequest="uploadLogo"
+                        >
+                          <a-avatar
+                            v-if="formModel.logoUrl"
                             shape="square"
-                            :size="64"
-                            icon="user"
+                            :size="128"
+                            :src="formModel.logoUrl"
                             @click="changeLogo"
                         />
-                        <a-avatar
-                            v-if="formModel.logoUrl && formModel.logoUrl != ''"
+                          <div v-else>
+                            <a-icon :type="uploadLoading ? 'loading' : 'plus'" />
+                            <div class="ant-upload-text">
+                              上传
+                            </div>
+                          </div>
+                        </a-upload>
+                        <!-- <a-avatar
+                            v-if=""
                             shape="square"
                             :size="64"
-                            :src="formModel.logoUrl"
+                            :icon="!formModel.logoUrl || formModel.logoUrl  == '' ? 'user' : ''"
+                            :src="formModel.logoUrl && formModel.logoUrl != '' ? formModel.logoUrl : ''"
                             @click="changeLogo"
-                        />
-                        <a-input
+                        /> -->
+                        
+                        <!-- <a-input
                             v-model="formModel.logoUrl"
                             type="hidden"
-                        >
+                        > -->
                         </a-input>
                     </a-form-model-item>
                     <a-form-model-item
@@ -260,6 +269,7 @@
 import { fetchList, addObj, putObj } from "@/api/biz/enterprise";
 import { disposereq, timestampToTime, timestampToymd } from "@/utils/util";
 import { pca, pcaa } from "area-data";
+import { uploadFile } from "@/api/biz/resource";
 
 let columns = [
   {
@@ -325,6 +335,7 @@ export default {
         showQuickJumper: true,
         showSizeChanger: true,
       },
+      uploadLoading: false,
       loading: false,
       modalVisible: false,
       modalTitle: "添加",
@@ -492,7 +503,45 @@ export default {
     changeLogo() {
       console.log("changeLogo click");
     },
+    beforeUpload(file) {
+      const isJpgOrPng =
+        file.type === "image/jpeg" || file.type === "image/png";
+      if (!isJpgOrPng) {
+        this.$message.info("只能上传图片");
+      }
+      const isLt2M = file.size / 1024 / 1024 < 10;
+      if (!isLt2M) {
+        this.$message.error("Image must smaller than 10MB!");
+      }
+      return isJpgOrPng && isLt2M;
+    },
+    handleUpload(info){
+      if (info.file.status === "uploading") {
+        this.uploadLoading = true;
+        return;
+      }
+      if (info.file.status === 'done') {
+        this.uploadLoading = false;
+        return;
+      }
+    },
+    uploadLogo(data){
+    const formData = new FormData();
+    formData.append("file", data.file);
+    uploadFile(formData)
+      .then((res) => {
+        if (res.data.resp_code == 200) {
+          this.formModel.logoUrl = res.data.datas.url;
+        } else {
+          this.$message.info("上传失败");
+        }
+      })
+      .catch((err) => {
+        disposereq(this, err);
+      });
+  }
   },
+  
 };
 </script>
 <style>
@@ -524,4 +573,17 @@ export default {
   padding: 0px 0px 0px 0px;
   margin: 0px 0px 0px 10px;
 }
+.avatar-uploader > .ant-upload {
+  width: 128px;
+  height: 128px;
+}
+.ant-upload-select-picture-card i {
+  font-size: 32px;
+  color: #999;
+}
+
+.ant-upload-select-picture-card .ant-upload-text {
+  margin-top: 8px;
+  color: #666;
+}
 </style>
\ No newline at end of file