chore: 调整InputFile组件错误提示位置, 增加多文件上传示例 (#8566)

docs/zh-CN/components/form/input-file.md

@@ -302,6 +302,48 @@ order: 21
 }
 ```
 
+## 上传文件列表
+
+```schema: scope="body"
+{
+    "type": "form",
+    "api": "/api/mock2/form/saveForm",
+    "debug": true,
+    "data": {
+      "files": [
+        {
+          "id":"2ba48d02d349",
+          "value":"http://amis.bj.bcebos.com/amis/2017-11/1510713111265/fis3-react.md",
+          "url":"http://amis.bj.bcebos.com/amis/2017-11/1510713111265/fis3-react.md",
+          "filename":"file1.md",
+          "name":"file1.md",
+          "state":"uploaded"
+        },
+        {
+          "id":"14723e0bc640",
+          "value":"http://amis.bj.bcebos.com/amis/2017-11/1510713111265/fis3-react.md",
+          "url":"http://amis.bj.bcebos.com/amis/2017-11/1510713111265/fis3-react.md",
+          "filename":"file2.md",
+          "name":"file2.md",
+          "state":"uploaded"
+        }
+      ]
+    },
+    "body": [
+      {
+          "type": "input-file",
+          "name": "files",
+          "label": false,
+          "mode": "horizontal",
+          "accept": "*",
+          "receiver": "/api/mock2/upload/random",
+          "multiple": true,
+          "joinValues": false
+      }
+    ]
+}
+```
+
 ## 属性表
 
 除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置

mock/cfc/mock/upload/random.js

@@ -0,0 +1,31 @@
+/** 测试上传，随机成功 */
+module.exports = function(req, res) {
+  const pool = [1,2,3,4,5,6,7,8,9,10];
+  let result = pool.slice();
+
+  for( let i = 0; i < pool.length; i++) {
+    let k = Math.floor(Math.random() * (pool.length - i) + i);
+    [result[i], result[k]] = [result[k], result[i]];
+  }
+
+  const randomNum = result[0];
+
+  if (randomNum > 5) {
+    return res.json({
+      status: 0,
+      msg: '上传成功',
+      data: {
+        "value": `http://amis.bj.bcebos.com/amis/random/${randomNum}`,
+        "url": `http://amis.bj.bcebos.com/amis/random/${randomNum}`,
+        "filename": `random${randomNum}.js`
+      }
+    });
+  }
+  else {
+    return res.json({
+      status: 500,
+      msg: '上传失败',
+      data: null
+    });
+  }
+}

packages/amis-ui/scss/components/form/_file.scss

@@ -300,6 +300,7 @@
 
     > a {
       cursor: pointer;
+      font-size: var(--fontSizeSm);
     }
   }
 }

packages/amis/src/renderers/Form/InputFile.tsx

@@ -1497,7 +1497,7 @@ export default class FileControl extends React.Component<FileProps, FileState> {
               return (
                 <li key={file.id}>
                   <TooltipWrapper
-                    placement="bottom"
+                    placement="top"
                     container={container || env?.getModalContainer}
                     tooltipClassName={cx(
                       'FileControl-list-tooltip',