layui/docs/upload/index.md

title	toc
上传组件 upload	true

上传组件

上传组件 upload 是用于处理文件上传的前端交互逻辑，可以更好地协助后端实现文件从本地到服务端上传的对接。

示例

以下示例的部分上传接口由第三方网站 https://httpbin.org 提供，它可以模拟各类 HTTP 请求。若未配置上传接口的，每次上传都会报「请求上传接口出现异常」的提示，这属于正常现象。

{{- d.include("/upload/detail/demo.md") }}

API

API	描述
var upload = layui.upload	获得 upload 模块。
var inst = upload.render(options)	upload 组件渲染，核心方法。
inst.upload()	对当前实例提交上传
inst.reload(options)	对当前实例进行重载
inst.config	获得当前实例的属性配置项

渲染

upload.render(options);

• 参数 options : 基础属性配置项。#详见属性
  注 : 除 elem 属性外，其他基础属性也可以直接写在元素的 lay-options="{}" 属性中。

<button type="button" class="layui-btn" id="ID-test-uoload">上传</button>
<button type="button" class="layui-btn test-class-upload" lay-options="{}">上传</button>
<button type="button" class="layui-btn test-class-upload" lay-options="{}">上传</button>
  
<!-- import layui -->
<script>
layui.use(function(){
  var upload = layui.upload;
  // 单个渲染
  upload.render({
    elem: '#ID-test-uoload',
    // …
  });
  // 批量渲染
  upload.render({
    elem: '.test-class-upload',
    // …
  });
});
</script>

该方法返回一个实例对象，包含操作当前实例的相关方法成员。

var inst = upload.render(options);
console.log(inst); // 得到当前实例对象

提交上传

inst.upload();

• 无需传递参数

文件在进行选择后，会自动提交上传。而若文件上传失败，则可以使用该方法来重新上传，

// 渲染
var inst = upload.render({
  elem: '#id',
  error: function(){ // 上传失败的回调
    // 当上传失败时，可在此处生成「重新上传」按钮，并执行该方法重新触发上传提交
    /*
    $('#btn').on('click', function(){
      inst.upload();
    })
    */
  }
  // …
}); 

重载

inst.reload(options);

• 参数 options : 基础属性配置项。#详见属性

该方法用于对当前的上传实例进行完整重载，所有属性均可参与到重载中。

// 渲染
var inst = upload.render({
  elem: '#id',
  // …
});
 
// 重载
inst.reload({
  field: 'AAA',
  // …
})

属性

{{- d.include("/upload/detail/options.md") }}

跨域方案

upload 组件支持跨域上传，一般有以下两种场景

• 自建上传服务。在服务端配置 CORS 开启跨资源共享。 即对接口所在的服务器设置 Access-Control-Allow-Origin 相关 header 信息。

• 第三方上传服务。如：阿里云、腾讯云等，只需按照不同平台对应的上传 SDK 进行操作即可。