描述：图片

src/views/admin/meeting/modules/RoomContentModal.vue

@@ -265,26 +265,28 @@
       <a-row>
         <a-col :span='10'>
           <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='室内图片'>
-            <!--        <a-input placeholder="室内图片url" v-decorator="['indoorPicUrl']" />-->
             <a-upload
-              v-decorator="['indoorPicUrl']"
+              v-decorator="['indoorPicUrl', {rules: [{ required: true, message: '上传室内图片' }]}]"
               list-type='picture-card'
               class='avatar-uploader'
-              :show-upload-list='false'
+              :file-list='fileList'
               :action='uploadUrl'
               :headers='headers'
-              :before-upload='beforeUpload'
+              @preview='handlePreview'
-              @change='handleChange'
+              @change='handleChangeFileList'
             >
-              <img v-if='imageUrl' :src='imageUrl' style='width: 102px; height: 102px' />
+              <div v-if='fileList.length < 4'>
-              <div v-else>
+                <a-icon type='plus' />
-                <a-icon :type="loading ? 'loading' : 'plus'" />
                 <div class='ant-upload-text'> 上传</div>
               </div>
             </a-upload>
+            <a-modal :visible='previewVisible' :footer='null' @cancel='handleCancel'>
+              <img style='width: 100%' :src='previewImage' />
+            </a-modal>
           </a-form-item>
         </a-col>
       </a-row>
+
     </a-form>
   </a-modal>
 </template>
@@ -336,7 +338,10 @@ export default {
       buildingDetailList: [], // 楼层
       roomList: [], // 房间
       tenantEnable: false,
-      parkEnable: false
+      parkEnable: false,
+      previewVisible: false,
+      previewImage: '',
+      fileList: []
     }
   },
   beforeCreate() {
@@ -494,38 +499,19 @@ export default {
     },
     moment,
     //
-    beforeUpload(file) {
+    async handlePreview(file) {
-      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
+      if (!file.url && !file.preview) {
-      if (!isJpgOrPng) {
+        file.preview = await getBase64FileList(file.originFileObj)
-        this.$message.error('You can only upload JPG file!')
       }
-      const isLt2M = file.size / 1024 < 5000
+      this.previewImage = file.url || file.preview
-      if (!isLt2M) {
+      this.previewVisible = true
-        this.$message.error('图片必须小于 5M!')
-      }
-      return isJpgOrPng && isLt2M
     },
-    handleChange(info) {
+    handleCancel() {
-      if (info.file.status === 'uploading') {
+      this.previewVisible = false
-        this.loading = true
+    },
-        return
+    // 上传banner
-      }
+    handleChangeFileList({ fileList }) {
-      if (info.file.status === 'done') {
+      this.fileList = fileList
-        const { form: { setFieldsValue } } = this
-        const result = info.file.response
-        // 设置值
-        this.$nextTick(() => {
-          setFieldsValue({
-            // 设置相对路径
-            indoorPicUrl: result.fileName
-          })
-        })
-        // Get this url from response in real world.
-        getBase64(info.file.originFileObj, imageUrl => {
-          this.imageUrl = imageUrl
-          this.loading = false
-        })
-      }
     },
     add() {
       this.form.resetFields()
@@ -566,11 +552,15 @@ export default {
       }
       // 获取用户信息
       this.getUserDetail()
-      //
+      // 图片
       if (this.mdl.indoorPicUrl) {
-        this.imageUrl = process.env.VUE_APP_API_BASE_URL + this.mdl.indoorPicUrl
+        this.mdl.indoorPicUrl = JSON.parse(this.mdl.indoorPicUrl)
+        this.mdl.indoorPicUrl.forEach((item, i) => {
+          item.url = process.env.VUE_APP_API_BASE_URL + item.url
+        })
+        this.fileList = this.mdl.indoorPicUrl
       } else {
-        this.imageUrl = ''
+        this.fileList = []
       }
       //
       this.visible = true
@@ -614,6 +604,19 @@ export default {
         if (!err) {
           console.log('Received values of form: ', values)
           this.confirmLoading = true
+          const indoorPicUrl = []
+          this.fileList.forEach((file, index) => {
+            // 添加原来的
+            if (file.hasOwnProperty('name') && file.hasOwnProperty('url') && file.hasOwnProperty('uid')) {
+              indoorPicUrl.push({ 'name': file.name, 'url': file.name, 'uid': index })
+            }
+            if (file.status === 'done' && file.response.code === 0) {
+              const data = file.response
+              indoorPicUrl.push({ 'name': data.fileName, 'url': data.fileName, 'uid': index })
+            }
+          })
+          // 多个图片
+          values.indoorPicUrl = JSON.stringify(indoorPicUrl)
           saveRoomContent(values)
             .then((res) => {
               if (res.code === 0) {

src/views/admin/meeting/modules/ShowroomModal.vue

@@ -165,23 +165,24 @@
       <a-row>
         <a-col :span='10'>
           <a-form-item :labelCol='labelCol' :wrapperCol='wrapperCol' label='室内图片'>
-            <!--        <a-input placeholder="室内图片url" v-decorator="['indoorPicUrl']" />-->
             <a-upload
-              v-decorator="['indoorPicUrl']"
+              v-decorator="['indoorPicUrl', {rules: [{ required: true, message: '上传室内图片' }]}]"
               list-type='picture-card'
               class='avatar-uploader'
-              :show-upload-list='false'
+              :file-list='fileList'
               :action='uploadUrl'
               :headers='headers'
-              :before-upload='beforeUpload'
+              @preview='handlePreview'
-              @change='handleChange'
+              @change='handleChangeFileList'
             >
-              <img v-if='imageUrl' :src='imageUrl' style='width: 102px; height: 102px' />
+              <div v-if='fileList.length < 4'>
-              <div v-else>
+                <a-icon type='plus' />
-                <a-icon :type="loading ? 'loading' : 'plus'" />
                 <div class='ant-upload-text'> 上传</div>
               </div>
             </a-upload>
+            <a-modal :visible='previewVisible' :footer='null' @cancel='handleCancel'>
+              <img style='width: 100%' :src='previewImage' />
+            </a-modal>
           </a-form-item>
         </a-col>
       </a-row>
@@ -236,7 +237,10 @@ export default {
       buildingDetailList: [], // 楼层
       roomList: [], // 房间
       tenantEnable: false,
-      parkEnable: false
+      parkEnable: false,
+      previewVisible: false,
+      previewImage: '',
+      fileList: []
     }
   },
   beforeCreate() {
@@ -386,39 +390,20 @@ export default {
       })
     },
     moment,
-
+    //
-    beforeUpload(file) {
+    async handlePreview(file) {
-      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
+      if (!file.url && !file.preview) {
-      if (!isJpgOrPng) {
+        file.preview = await getBase64FileList(file.originFileObj)
-        this.$message.error('You can only upload JPG file!')
       }
-      const isLt2M = file.size / 1024 < 5000
+      this.previewImage = file.url || file.preview
-      if (!isLt2M) {
+      this.previewVisible = true
-        this.$message.error('图片必须小于 5M!')
-      }
-      return isJpgOrPng && isLt2M
     },
-    handleChange(info) {
+    handleCancel() {
-      if (info.file.status === 'uploading') {
+      this.previewVisible = false
-        this.loading = true
+    },
-        return
+    // 上传banner
-      }
+    handleChangeFileList({ fileList }) {
-      if (info.file.status === 'done') {
+      this.fileList = fileList
-        const { form: { setFieldsValue } } = this
-        const result = info.file.response
-        // 设置值
-        this.$nextTick(() => {
-          setFieldsValue({
-            // 设置相对路径
-            indoorPicUrl: result.fileName
-          })
-        })
-        // Get this url from response in real world.
-        getBase64(info.file.originFileObj, imageUrl => {
-          this.imageUrl = imageUrl
-          this.loading = false
-        })
-      }
     },
     add() {
       this.form.resetFields()
@@ -459,11 +444,15 @@ export default {
       }
       // 获取用户信息
       this.getUserDetail()
-      //
+      // 图片
       if (this.mdl.indoorPicUrl) {
-        this.imageUrl = process.env.VUE_APP_API_BASE_URL + this.mdl.indoorPicUrl
+        this.mdl.indoorPicUrl = JSON.parse(this.mdl.indoorPicUrl)
+        this.mdl.indoorPicUrl.forEach((item, i) => {
+          item.url = process.env.VUE_APP_API_BASE_URL + item.url
+        })
+        this.fileList = this.mdl.indoorPicUrl
       } else {
-        this.imageUrl = ''
+        this.fileList = []
       }
       this.visible = true
       this.$nextTick(() => {
@@ -480,6 +469,19 @@ export default {
         if (!err) {
           console.log('Received values of form: ', values)
           this.confirmLoading = true
+          const indoorPicUrl = []
+          this.fileList.forEach((file, index) => {
+            // 添加原来的
+            if (file.hasOwnProperty('name') && file.hasOwnProperty('url') && file.hasOwnProperty('uid')) {
+              indoorPicUrl.push({ 'name': file.name, 'url': file.name, 'uid': index })
+            }
+            if (file.status === 'done' && file.response.code === 0) {
+              const data = file.response
+              indoorPicUrl.push({ 'name': data.fileName, 'url': data.fileName, 'uid': index })
+            }
+          })
+          // 多个图片
+          values.indoorPicUrl = JSON.stringify(indoorPicUrl)
           saveShowroom(values).then(res => {
             if (res.code === 0) {
               this.$message.success('保存成功')