layui上传文件upload使用

本文链接： https://blog.csdn.net/iChangebaobao/article/details/100690744

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>

//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');
      }
  });
});

layui上传文件upload使用

猜你喜欢