Layui upload上传文件

1.upload基本介绍使用 upload 模块必须与 upload.render(options) 方法打交道，其中的 options即为基础参数，它是一个对象2.参数介绍3.html完整代码4.前端页面截图1.文件名通过方法request.files['file']或request.files.get('file')获取注意事项: 2.flask代码三.相关截图1.选择文件后截图2. 点击'开

z60015260

21163人浏览 · 2022-06-16 11:23:11

z60015260 · 2022-06-16 11:23:11 发布

一.使用layui upload模块上传文件

1.upload基本介绍

使用 upload 模块必须与 upload.render(options) 方法打交道，其中的 options即为基础参数，它是一个对象

var upload = layui.upload; //得到 upload 对象
 
//创建一个上传组件
upload.render({
  elem: '#id'
  ,url: ''
  ,done: function(res, index, upload){ //上传后的回调
  
  } 
  //,accept: 'file' //允许上传的文件类型
  //,size: 50 //最大允许上传的文件大小
  //,……
})

该接口返回的相应信息（response）必须是一个标准的 JSON 格式

{
  "code": 0
  ,"msg": ""
  ,"data": {
    "src": "http://cdn.layui.com/123.jpg"
  }
}

2.参数介绍

参数选项	说明	类型	默认值
elem	指向容器选择器，如：elem: '#id'。也可以是DOM对象	string/object	-
elemList	列表元素对象
url	服务端上传接口，返回的数据规范请详见下文	string	-
data	请求上传接口的额外参数。如：data: {id: 'xxx'} 从 layui 2.2.6 开始，支持动态值，如: </>code data: { id: function(){ return $('#id').val(); } }	object	-
headers	接口的请求头。如：headers: {token: 'sasasas'}。注：该参数为 layui 2.2.6 开始新增
accept	指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）	string	images
acceptMime	规定打开文件选择框时，筛选出的文件类型，值为用逗号隔开的 MIME 类型列表。如： acceptMime: 'image/'（只显示图片文件） acceptMime: 'image/jpg, image/png'*（只显示 jpg 和 png 文件）注：该参数为 layui 2.2.6 开始新增	string	images
exts	允许上传的文件后缀。一般结合 accept 参数类设定。假设 accept 为 file 类型时，那么你设置 exts: 'zip\|rar\|7z' 即代表只允许上传压缩格式的文件。如果 accept 未设定，那么限制的就是图片的文件格式	string	jpg\|png\|gif\|bmp\|jpeg
auto	是否选完文件后自动上传。如果设定 false，那么需要设置 bindAction 参数来指向一个其它按钮提交上传	boolean	true
bindAction	指向一个按钮触发上传，一般配合 auto: false 来使用。值为选择器或DOM对象，如：bindAction: '#btn'	string/object	-
field	设定文件域的字段名	string	file
size	设置文件最大可允许上传的大小，单位 KB。不支持ie8/9	number	0（即不限制）
multiple	是否允许多文件上传。设置 true即可开启。不支持ie8/9	boolean	false
number	设置同时可上传的文件数量，一般配合 multiple 参数出现。注意：该参数为 layui 2.2.3 开始新增	number	0（即不限制）
drag	是否接受拖拽的文件上传，设置 false 可禁用。不支持ie8/9	boolean	true
回调
choose	选择文件后的回调函数。返回一个object参数，详见下文	function	-
before	文件提交上传前的回调。返回一个object参数（同上），详见下文	function	-
done	执行上传请求后的回调。返回三个参数，分别为：res（服务端响应信息）、index（当前文件的索引）、upload（重新上传的方法，一般在文件上传失败后使用）。详见下文	function	-
error	执行上传请求出现异常的回调（一般为网络异常、URL 404等）。返回两个参数，分别为：index（当前文件的索引）、upload（重新上传的方法）。详见下文	function	-

3.html完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../static/layui-v2.6.8/layui/css/layui.css">

</head>
<body>
<div class="layuimini-container">
	<div class="layuimini-main">
		<fieldset class="table-search-fieldset">
			<legend>文件上传</legend>
			<div style="margin: 10px 10px 10px 10px">
			<div class="layui-upload">
			  <button type="button" class="layui-btn layui-btn-primary layui-border-blue" id="testList"><i class="layui-icon layui-icon-file"></i> 选择文件 </button> 
			  <button type="button" class="layui-btn layui-btn-primary layui-border-green" id="testListAction"><i class="layui-icon layui-icon-upload"></i> 开始上传 </button>
			  <button type="button" class="layui-btn layui-btn-primary layui-border-black" id="clearList"><i class="layui-icon layui-icon-fonts-clear"></i> 清空显示 </button>
			  <div class="layui-upload-list" style="max-width: 1280px;height: auto;min-height: 600px;">
				<table class="layui-table">
				  <colgroup>
					<col>
					<col width="150">
					<col width="260">
					<col width="260">
					<col width="200">
				  </colgroup>
				  <thead>
					<tr>
						<th>文件名</th>
						<th>大小</th>
						<th>上传状态</th>
						<th>上传进度</th>
						<th>操作</th>
					</tr>
				  </thead>
				  <tbody id="demoList"></tbody>
				</table>
			  </div>
			  
			</div>
			</div> 
		</fieldset>
		
	</div>
</div>

<script src="../static/layui-v2.6.8/layui/layui.js" charset="utf-8"></script>

<script>
	layui.use(['upload', 'element', 'layer'], function(){
	  var $ = layui.jquery
	  ,upload = layui.upload
	  ,element = layui.element
	  ,layer = layui.layer;
	  
	  //清空文件列表
	  $('#clearList').click(function(){
	  	$('#demoList').html('');
	  });
	  
	
	  //多文件上传
	  var uploadListIns = upload.render({
	    elem: '#testList'     // 选择文件按钮
	    ,elemList: $('#demoList') //列表元素对象
	    ,url: '/file-upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
	    ,accept: 'file'  //指定允许上传时校验的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
	    ,multiple: true  //是否允许多文件上传。设置 true即可开启。不支持ie8/9
	    ,number: 5   //设置同时可上传的文件数量，一般配合 multiple 参数出现; 0 不限制
	    ,auto: false  //是否选完文件后自动上传。如果设定 false，那么需要设置 bindAction 参数来指向一个其它按钮提交上传
	    ,bindAction: '#testListAction'  //指向一个按钮触发上传，一般配合 auto: false 来使用
	    ,choose: function(obj){   //选择文件后的回调函数。返回一个object参数
	      var that = this;
	      var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
		  
	      //读取本地文件
	      obj.preview(function(index, file, result){
			console.log(index);
	        var tr = $(['<tr id="upload-'+ index +'">'
	          ,'<td>'+ file.name +'</td>'
	          ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
			  ,'<td>等待上传</td>'
	          ,'<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
	          ,'<td>'
	            ,'<button type="button" class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
	            ,'<button type="button" class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
	          ,'</td>'
	        ,'</tr>'].join(''));
	        
	        //单个重传
	        tr.find('.demo-reload').on('click', function(){
	          obj.upload(index, file);
	        });
	        
	        //删除
	        tr.find('.demo-delete').on('click', function(){
	          delete files[index]; //删除对应的文件
	          tr.remove();
	          uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
	        });
	        
	        that.elemList.append(tr);
	        element.render('progress'); //渲染新加的进度条组件
	      });
	    }
	    ,done: function(res, index, upload){ //成功的回调
	      var that = this;
	      if(res.code == 0){ //上传成功

	        var tr = that.elemList.find('tr#upload-'+ index)
	        ,tds = tr.children();
			// tds.remove();
			tds.eq(2).html('<span style="color:green;">上传成功</span>') //显示上传成功
	        tds.eq(3).html(''); //清空操作
	        delete this.files[index]; //删除文件队列已经上传成功的文件
	        return;
	      }
	      this.error(index, upload);
	    }
	    ,allDone: function(obj){ //多文件上传完毕后的状态回调
	      console.log(obj)
	    }
	    ,error: function(index, upload){ //错误回调
	      var that = this;
	      var tr = that.elemList.find('tr#upload-'+ index)
	      ,tds = tr.children();
		  tds.eq(2).html('<span style="color:red;">上传失败</span>') //显示上传成功
	      tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
	    }
	    ,progress: function(n, elem, e, index){ //注意：index 参数为 layui 2.6.6 新增
	      element.progress('progress-demo-'+ index, n + '%'); //执行进度条。n 即为返回的进度百分比
	    }
	  });
	})
</script>
</body>
</html>

4.前端页面截图

二.后端(flask)保存上传文件

1.文件名通过方法request.files['file']或request.files.get('file')获取

注意事项:

保存文件时,请使用全路径,使用相对路径时程序报错。

2.flask代码

# encoding:utf-8
"""
@file = app
@author = zouju
@create_time = 2022-06-14- 8:59
"""

from flask import Flask, render_template, jsonify, request

app = Flask(__name__)


@app.get('/')
def index():
    return render_template('layui-upload.html')


@app.post('/file-upload')
def file_upload():
    file = request.files['file']
    project_path = r'D:\python\2022\layui\layui-flask\static\upload'
    file_path = project_path + '\\' + file.filename
    print('文件保存路径:', file_path)
    file.save(file_path)  # 保存文件
    return jsonify({'code': 0, 'msg': '上传成功', 'data': {'src': file_path}})


if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000, debug=True)

三.相关截图

1.选择文件后截图

2. 点击'开始上传'后

3.文件全部上传成功

4.flask的调试信息

 * Running on http://192.168.168.83:5000/ (Press CTRL+C to quit)
192.168.168.83 - - [16/Jun/2022 11:10:07] "GET /static/layui-v2.6.8/layui/css/modules/layer/default/icon.png HTTP/1.1" 304 -
文件保存路径: D:\python\2022\layui\layui-flask\static\upload\L202204I022.xls
文件保存路径: D:\python\2022\layui\layui-flask\static\upload\SP-2021-10-22-11-35-19.xlsx
文件保存路径: D:\python\2022\layui\layui-flask\static\upload\SP-2021-11-03-08-07-49.xlsx
文件保存路径: D:\python\2022\layui\layui-flask\static\upload\离散任务令号、类别、类型定义操作指导书.doc
192.168.168.83 - - [16/Jun/2022 11:11:41] "POST /file-upload HTTP/1.1" 200 -
192.168.168.83 - - [16/Jun/2022 11:11:41] "POST /file-upload HTTP/1.1" 200 -
192.168.168.83 - - [16/Jun/2022 11:11:41] "POST /file-upload HTTP/1.1" 200 -
192.168.168.83 - - [16/Jun/2022 11:11:41] "POST /file-upload HTTP/1.1" 200 -
文件保存路径: D:\python\2022\layui\layui-flask\static\upload\script.sql
192.168.168.83 - - [16/Jun/2022 11:11:44] "POST /file-upload HTTP/1.1" 200 -

4. 保存的文件