提交

src/components/XForm/FileUpload.jsx

@@ -2,6 +2,10 @@ import React, { useState, useEffect } from 'react'
 import { Upload, Button, Icon } from 'antd';
 import { uploaderProps } from '../../utils/upload';
 
+/**
+ * value 数据的接收格式 [{ url: xxxxx.mp4 }]
+ * @param {*} props 
+ */
 function fileUpload(props) {
 
   const { value } = props
@@ -16,7 +20,9 @@ function fileUpload(props) {
 
 
   function getFileList() {
-    return (value || []).map((img, inx) => ({ uid: inx, url: img, name: img.substring(img.lastIndexOf('/') + 1, img.length), status: 'done' }))
+    console.log('fileUpload: ', value)
+    // value 数据的接收格式 [{ url: xxxxx.mp4 }, { url: xxxxx.jpg }]
+    return (value || []).filter(f => f !== undefined).map((img, inx) => ({ uid: inx, url: img, name: img.substring(img.lastIndexOf('/') + 1, img.length), status: 'done' }))
   }
 
   function setDefaultValue() {
@@ -28,13 +34,23 @@ function fileUpload(props) {
   }
 
   function onFileChange({ file, fileList }) {
+    console.log(file, fileList)
     setDefaultFileList(fileList)
     if (file.status === 'uploading') {
       return
     }
 
-    if (file.status === 'done') {
-      props.onChange([].concat(file.response))
+    if (file.status === 'done' || file.status === 'removed') {
+
+      // 因为这个控件本身返回的数据格式 [{ ..., response: '服务器返回的数据' }]
+      // 但是 我这里自己用的时候 传入的数据是 [ 'xxxx.mp4', 'xxxx.jpg' ], 然后通过 getFileList() 转换成了 [{ url: 'xxx.mp4' }] 这样的格式
+
+      // 原因是因为 控件返回的数据 和 fileList 展示已经上传的数据 的格式字段不一样
+
+      const resFileList = fileList.filter(f => f.response !== undefined).map(i => i.response)
+      const tempFileList = fileList.filter(f => f.url !== undefined).map(i => i.url)
+      const resultList = tempFileList.concat(resFileList || [])
+      props.onChange(resultList)
     }
   }
 

src/pages/building/list/add/components/base.jsx

@@ -45,6 +45,9 @@ function AddBuilding(props) {
 
   const [poi, setPoi] = useState([])
 
+  // 视频上传按钮是否 禁用
+  const [fileUploadDisabled, setFileUploadDisabled] = useState(false)
+
   // console.log('props.building: ', props.building)
   if (props.building.buildingId !== undefined) {
     const { buildingId } = props.building
@@ -75,6 +78,8 @@ function AddBuilding(props) {
       res.mapCoordinate = res.coordinate
       if (res.videoUrl) {
         res.videoUrl = [].concat(res.videoUrl)
+        // 视频上传按钮禁用
+        setFileUploadDisabled(true)
       }
       setPoi(res.mapJson || [])
       props.form.setFieldsValue(res)
@@ -101,6 +106,7 @@ function AddBuilding(props) {
     // 列表图
     data.listImg = data.listImage && data.listImage.map((item, index) => ({ imgType: 'list', url: item, orderNo: index + 1 }))
     if (data.videoUrl) {
+      console.log(data.videoUrl[0])
       data.videoUrl = data.videoUrl[0]
     }
     
@@ -120,9 +126,13 @@ function AddBuilding(props) {
 
   // 视频文件上传前 回调
   function fileUploadBeforeUpload(file, fileList) {
-    console.log(file, fileList)
+    // console.log('视频文件上传前 回调: ', file, fileList)
     return new Promise((resolve, reject) => {
-      if (file.type === 'video/mp4' || file.type === '.mp4') {
+      if (fileUploadDisabled) {
+        openNotificationWithIcon('error', '项目视频，只允许上传一个')
+        reject()
+      } else if (file.type === 'video/mp4' || file.type === '.mp4') {
+          setFileUploadDisabled(true)
           resolve(file)
       } else {
         openNotificationWithIcon('error', '项目视频，仅支持MP4格式')
@@ -271,7 +281,8 @@ function AddBuilding(props) {
           </Form.Item>
           <Form.Item label="项目视频" help="视频仅支持mp4格式，建议尺寸：1920*1080，比例16:9">
             {getFieldDecorator('videoUrl')(
-              <FileUpload accept=".mp4" beforeUpload={fileUploadBeforeUpload} label="上传视频"/>,
+              // disabled={fileUploadDisabled}
+              <FileUpload accept=".mp4" beforeUpload={fileUploadBeforeUpload} label="上传视频" />,
             )}
           </Form.Item>
           <Form.Item label="楼盘主图" help="建议图片尺寸：750*600px，比例5:4,格式：jpg，用于楼盘详情">