完善文件上传文档
This commit is contained in:
parent
64853519b7
commit
a5632aa299
@ -0,0 +1,228 @@
|
|||||||
|
# 文件上传
|
||||||
|
|
||||||
|
layui需要引入 **upload** 模块
|
||||||
|
|
||||||
|
如果上传图片，需要引入`viewer.css`和`viewer.js`
|
||||||
|
|
||||||
|
css
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- 需要时引入 -->
|
||||||
|
<link rel="stylesheet" href="assets/js/viewer/viewer.min.css" media="all">
|
||||||
|
```
|
||||||
|
|
||||||
|
js
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- 需要时引入 -->
|
||||||
|
<script src="assets/js/viewer/viewer.min.js"></script>
|
||||||
|
|
||||||
|
<script src="assets/js/layui/util/layui-file-upload.js"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
初始化
|
||||||
|
|
||||||
|
```js
|
||||||
|
// 引入viewer.js
|
||||||
|
let layuiFileUpload = new LayuiFileUpload(layui, Viewer);
|
||||||
|
// 未引入viewer.js
|
||||||
|
let layuiFileUpload = new LayuiFileUpload(layui);
|
||||||
|
```
|
||||||
|
|
||||||
|
## 表单
|
||||||
|
|
||||||
|
html模板
|
||||||
|
|
||||||
|
```html
|
||||||
|
|
||||||
|
<div id="xxxBox" class="layui-form-item layui-form-text">
|
||||||
|
<label class="layui-form-label"></label>
|
||||||
|
<button type="button" class="layui-btn layui-upload-file-btn" id="xxxUploadBtn">上传XXX</button>
|
||||||
|
<div class="upload-image-box">
|
||||||
|
<input type="hidden" id="xxx" name="xxx">
|
||||||
|
<div class="layui-btn-container" id="xxxFileBox"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
> 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为必填 | 是 |
|
||||||
Loading…
Reference in New Issue
Block a user