图片修改

src/views/pqs/voltageSags/sagGovern/businessUser/userPopup.vue

@@ -39,25 +39,18 @@
                             <el-input v-model='form.remark' :rows='2' type='textarea' placeholder='请输入描述' />
                         </el-form-item>
                         <el-form-item label='企业照片'>
+                            <div>
+                                <el-image  style="width: 200px;height: 200px;" :src='userLogo.url' :preview-src-list="[userLogo.url]" v-if="userLogo.url"></el-image>
                             <el-upload
                                 action=''
-                                v-model:file-list='fileList'
-                                list-type='picture-card'
+                                :show-file-list="false"
                                 :auto-upload='false'
-                                :limit='1'
                                 accept='.png,.jpg'
                                 :on-change='chooseImage'
-                                :on-remove='handleRemove'
-                                :before-upload='beforeAvatarUpload'
-                                :on-preview='handlePictureCardPreview'
                             >
-                                <el-icon>
-                                    <Plus />
-                                </el-icon>
+                                <el-button type="primary">上传图片</el-button>
                             </el-upload>
-                            <el-dialog v-model='dialogVisibleLogo'>
-                                <img w-full :src='fileList[0].url' alt='预览图片' />
-                            </el-dialog>
+                            </div>
                         </el-form-item>
                     </el-tab-pane>
 
@@ -91,6 +84,7 @@ import AreaCascard from '@/components/form/areaCascard/index.vue'
 import { uploadFile, deleteFile } from '@/api/system-boot/file'
 import { addSgUser, updateSgUser } from '@/api/advance-boot/sgGroven/sgUser'
 import IncomingTable from './IncomingTable.vue'
+import { fullUrl } from '@/utils/common'
 
 const dialogVisible = ref(false)
 const title = ref('')
@@ -102,11 +96,14 @@ const tab = ref('user')
 //进线表格子组件
 const incomingTable = ref()
 
-const fileList = ref<UploadUserFile[]>([])
+const userLogo = reactive({
+    url: '',
+    name: ''
+})
 
 const dialogVisibleLogo = ref(false)
 // 注意不要和表单ref的命名冲突
-const form = reactive({
+const form = reactive<anyObj>({
     id: '',
     userName: '',
     keyUser: '',
@@ -143,6 +140,10 @@ const open = (text: string, data?: anyObj) => {
         }
         form.addr = data.addr.split('/')
         form.keyUser = String(data.keyUser)
+        if(form.userLogo){
+            userLogo.url = fullUrl(form.userLogo)
+            // 图片的name我不知道
+        }
         //待子组件渲染完毕
         nextTick(() => {
             incomingTable.value.getTableData(form.id)
@@ -172,28 +173,22 @@ const reValueAddr = () => {
  * @param e
  */
 const chooseImage = (e: any) => {
-    fileList.value = []
     uploadFile(e.raw, 'sgGovern/').then(res => {
-        fileList.value[0].name = res.data.name
-        fileList.value[0].url = res.data.url
+
+        userLogo.name = res.data.name
+        userLogo.url = res.data.url
         form.userLogo = res.data.name
         ElMessage.success('新增成功')
     })
 }
 
-/**
- * 上传文件之前
- */
-const beforeAvatarUpload = () => {
-    fileList.value = []
-}
 
 /**
- * 删除文件操作
+ * 删除文件操作,此操作应在提交表单的时候操作，删除的图片可能有多张
  */
-const handleRemove = (e: any, fileList: any) => {
+const handleRemove = (e: any, userLogo: any) => {
     form.userLogo = ''
-    fileList.value = []
+    userLogo.value = []
     deleteFile(e.name).then(res => {
         ElMessage.success('删除成功')
     })