欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

layui上传文件upload使用

程序员文章站 2022-04-08 12:25:52
...

html

<div class="layui-form-item">
   <label class="layui-form-label">资讯内容<span style="color: red"> *</span></label>
    <div class="layui-input-block">
        <button type="button" class="layui-btn" id="upload" style="width: 152px;"><i
                class="layui-icon layui-icon-upload"></i>上传文件</button>
        <div style="color: rgb(102, 102, 102); margin-top: 10px;"><span
                style="color: red;">*</span>只能上传后缀为.pdf文件,且不超过10MB
        </div>
    </div>
</div>
<div class="layui-form-item" v-show="showTable">
    <label class="layui-form-label"></label>
    <div class="layui-input-block">
        <div class="layui-upload-list">
            <table class="layui-table" style="overflow: auto;">
                <thead>
                    <tr>
                        <th>文件名</th>
                        <th>大小</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="demoList"></tbody>
            </table>
        </div>
    </div>
</div>

js

//vue部分
data:{ 
	showTable:flase
}

 layui.use([ 'form', 'upload'], function () {
          var form = layui.form,
               upload = layui.upload;

var demoListView = $('#demoList'), uploadListIns = upload.render({
    elem: '#upload' //绑定元素
      , url: MALL_URL + 'admin/news/addNews'//上传接口
      , method: 'POST'
      , type: "file"
      , exts: 'pdf' //允许上传的文件后缀
      , size: 1024 * 1024 * 10 //最大允许上传的文件大小
      , accept: 'file'
      , auto: false//是否选完文件后自动上传。
      , bindAction: '#submit'//指向一个按钮触发上传,一般配合 auto: false 来使用。
      , field: 'content'//设定文件域的字段名
      , before: function (obj) { //obj参数包含的信息,跟 choose回调完全一致
          // layer.load(); //上传loading 
      }
      , choose: function (obj) {//选择文件后的回调函数。返回一个object参数
          console.log(obj);
          //将每次选择的文件追加到文件队列
          var files = obj.pushFile();

          //预读本地文件,如果是多文件,则会遍历。(不支持ie8/9)
          obj.preview(function (index, file, result) {
              console.log(index); //得到文件索引
              console.log(file); //得到文件对象
              console.log(result); //得到文件base64编码,比如图片
              var tr = $(['<tr id="upload-' + index + '">', '<td>' + file.name + '</td>', '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>', '<td>等待上传</td>', '<td>', '<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>', '<button class="layui-btn layui-btn-mini 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 值,以免删除后出现同名文件不可选
                  app.showTable = false;
              });

              demoListView.append(tr);
              app.showTable = true;
              that.content = result;
              console.log(that.content);

              //obj.resetFile(index, file, '123.jpg'); //重命名文件名,layui 2.3.0 开始新增

              //这里还可以做一些 append 文件列表 DOM 的操作

              //obj.upload(index, file); //对上传失败的单个文件重新上传,一般在某个事件中使用
              //delete files[index]; //删除列表中对应的文件,一般在某个事件中使用
          });
      }
      , done: function (res) {//上传完毕回调
          //执行上传请求后的回调。返回三个参数,分别为:res(服务端响应信息)、index(当前文件的索引)、upload(重新上传的方法,一般在文件上传失败后使用)
          console.log(res);
      }
      , error: function (index, upload) {//执行上传请求出现异常的回调
          //返回index(当前文件的索引)、upload(重新上传的方法
          layer.closeAll('loading');
      }
  });
});