[layui]上传文件upload使用

html

   资讯内容 *
    

        上传文件
        
*只能上传后缀为.pdf文件，且不超过10MB
        
    


    
    

        

            

                

                    

                        
文件名
                        
大小
                        
状态
                        
操作
                    
                
                

            
        
    

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 = $(['', '' + file.name + '', '' + (file.size / 1014).toFixed(1) + 'kb', '等待上传', '', '重传', '删除', '', ''].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');
      }
  });
});