From a5632aa299f138b90f838f029204ee00f3979eae Mon Sep 17 00:00:00 2001 From: wanggeng <450292408@qq.com> Date: Fri, 9 Sep 2022 15:12:50 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=96=87=E4=BB=B6=E4=B8=8A?= =?UTF-8?q?=E4=BC=A0=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../frontend/layui/util/layui-file-upload.md | 228 ++++++++++++++++++ 1 file changed, 228 insertions(+) create mode 100644 docs/src/main/resources/doc/wgink/code/frontend/layui/util/layui-file-upload.md diff --git a/docs/src/main/resources/doc/wgink/code/frontend/layui/util/layui-file-upload.md b/docs/src/main/resources/doc/wgink/code/frontend/layui/util/layui-file-upload.md new file mode 100644 index 00000000..6b92cfaa --- /dev/null +++ b/docs/src/main/resources/doc/wgink/code/frontend/layui/util/layui-file-upload.md @@ -0,0 +1,228 @@ +# 文件上传 + +layui需要引入 **upload** 模块 + +如果上传图片，需要引入`viewer.css`和`viewer.js` + +css + +```html + + +``` + +js + +```html + + + + +``` + +初始化 + +```js +// 引入viewer.js +let layuiFileUpload = new LayuiFileUpload(layui, Viewer); +// 未引入viewer.js +let layuiFileUpload = new LayuiFileUpload(layui); +``` + +## 表单 + +html模板 + +```html + +
+ + +
+ +
+
+
+``` + +> xxx为名称，需要保持一致 + +### 上传图片 + +#### 后台 + +```js +layuiFileUpload.initUploadImage(fieldName, fileCount); +``` + +参数 + +| 名称 | 类型 | 描述 | 是否必填 | +|-----------|--------|----------------------|------| +| fieldName | string | 字段名称，与html模板中的xxx一致 | 是 | +| fileCount | int | 文件上传数量，0表示使用默认数量，默认9 | 是 | + +#### H5端，校验token + +```js +let headers = {token: 'token'}; +layuiFileUpload.initAppUploadImage(fieldName, fileCount, headers); +``` + +参数 + +| 名称 | 类型 | 描述 | 是否必填 | +|-----------|--------|------------------------------|------| +| fieldName | string | 字段名称，与html模板中的xxx一致 | 是 | +| fileCount | int | 文件上传数量，0表示使用默认数量，默认9 | 是 | +| headers | object | 提交请求时的header中的参数，这里的token为必填 | 是 | + +#### H5端，校验userId + +```js +let headers = {userId: 'userId'}; +layuiFileUpload.initAppReleaseUploadImage(fieldName, fileCount, headers); +``` + +参数 + +| 名称 | 类型 | 描述 | 是否必填 | +|-----------|--------|-------------------------------|------| +| fieldName | string | 字段名称，与html模板中的xxx一致 | 是 | +| fileCount | int | 文件上传数量，0表示使用默认数量，默认9 | 是 | +| headers | object | 提交请求时的header中的参数，这里的userId为必填 | 是 | + +### 上传文件 + +#### 后台 + +```js +layuiFileUpload.initUploadFile(fieldName, fileCount); +``` + +参数 + +| 名称 | 类型 | 描述 | 是否必填 | +|-----------|--------|----------------------|------| +| fieldName | string | 字段名称，与html模板中的xxx一致 | 是 | +| fileCount | int | 文件上传数量，0表示使用默认数量，默认9 | 是 | + +#### H5端，校验token + +```js +let headers = {token: 'token'}; +layuiFileUpload.initAppUploadFile(fieldName, fileCount, headers); +``` + +参数 + +| 名称 | 类型 | 描述 | 是否必填 | +|-----------|--------|------------------------------|------| +| fieldName | string | 字段名称，与html模板中的xxx一致 | 是 | +| fileCount | int | 文件上传数量，0表示使用默认数量，默认9 | 是 | +| headers | object | 提交请求时的header中的参数，这里的token为必填 | 是 | + +#### H5端，校验userId + +```js +let headers = {userId: 'userId'}; +layuiFileUpload.initAppReleaseUploadFile(fieldName, fileCount, headers); +``` + +参数 + +| 名称 | 类型 | 描述 | 是否必填 | +|-----------|--------|-------------------------------|------| +| fieldName | string | 字段名称，与html模板中的xxx一致 | 是 | +| fileCount | int | 文件上传数量，0表示使用默认数量，默认9 | 是 | +| headers | object | 提交请求时的header中的参数，这里的userId为必填 | 是 | + +### 上传视频 + +#### 后台 + +```js +layuiFileUpload.initUploadVideo(fieldName, fileCount); +``` + +参数 + +| 名称 | 类型 | 描述 | 是否必填 | +|-----------|--------|----------------------|------| +| fieldName | string | 字段名称，与html模板中的xxx一致 | 是 | +| fileCount | int | 文件上传数量，0表示使用默认数量，默认9 | 是 | + +#### H5端，校验token + +```js +let headers = {token: 'token'}; +layuiFileUpload.initAppUploadVideo(fieldName, fileCount, headers); +``` + +参数 + +| 名称 | 类型 | 描述 | 是否必填 | +|-----------|--------|------------------------------|------| +| fieldName | string | 字段名称，与html模板中的xxx一致 | 是 | +| fileCount | int | 文件上传数量，0表示使用默认数量，默认9 | 是 | +| headers | object | 提交请求时的header中的参数，这里的token为必填 | 是 | + +#### H5端，校验userId + +```js +let headers = {userId: 'userId'}; +layuiFileUpload.initAppReleaseUploadVideo(fieldName, fileCount, headers); +``` + +参数 + +| 名称 | 类型 | 描述 | 是否必填 | +|-----------|--------|-------------------------------|------| +| fieldName | string | 字段名称，与html模板中的xxx一致 | 是 | +| fileCount | int | 文件上传数量，0表示使用默认数量，默认9 | 是 | +| headers | object | 提交请求时的header中的参数，这里的userId为必填 | 是 | + +### 上传音频 + +#### 后台 + +```js +layuiFileUpload.initUploadAudio(fieldName, fileCount); +``` + +参数 + +| 名称 | 类型 | 描述 | 是否必填 | +|-----------|--------|----------------------|------| +| fieldName | string | 字段名称，与html模板中的xxx一致 | 是 | +| fileCount | int | 文件上传数量，0表示使用默认数量，默认9 | 是 | + +#### H5端，校验token + +```js +let headers = {token: 'token'}; +layuiFileUpload.initAppUploadAudio(fieldName, fileCount, headers); +``` + +参数 + +| 名称 | 类型 | 描述 | 是否必填 | +|-----------|--------|------------------------------|------| +| fieldName | string | 字段名称，与html模板中的xxx一致 | 是 | +| fileCount | int | 文件上传数量，0表示使用默认数量，默认9 | 是 | +| headers | object | 提交请求时的header中的参数，这里的token为必填 | 是 | + +#### H5端，校验userId + +```js +let headers = {userId: 'userId'}; +layuiFileUpload.initAppReleaseUploadAudio(fieldName, fileCount, headers); +``` + +参数 + +| 名称 | 类型 | 描述 | 是否必填 | +|-----------|--------|-------------------------------|------| +| fieldName | string | 字段名称，与html模板中的xxx一致 | 是 | +| fileCount | int | 文件上传数量，0表示使用默认数量，默认9 | 是 | +| headers | object | 提交请求时的header中的参数，这里的userId为必填 | 是 | \ No newline at end of file