layui上传图片方法

一：普通上传

页面

  <button class="layui-btn" id="btnUploadImg">上传</button>

脚本

 layupload.render({
 elem: '#btnUploadImg' //绑定元素
 , url: apiurl + '/api/Images/UpLoadInStockImage?StockId=' + id //上传接口
 , headers: {
     token:xx
 }
 , done: function (res) {
     //上传完毕回调
    _loadPic(id);
 }
 , error: function () {
     //请求异常回调
 }
 });

接口

 /// <summary>
        ///  上传图片
        /// </summary>
        /// <param name="model"></param>
        /// <returns></returns>
        [HttpPost]
        public HttpResponseMessage UpLoadImage([FromUri]RequestXX model)
        {
            var files = System.Web.HttpContext.Current?.Request?.Files;

            HttpResponseMessage message = new HttpResponseMessage
            {
                Content = new StringContent((_images.UpLoadXXImage(model, files, UserInfo)).ToJson(), Encoding.UTF8, "text/html"),
                StatusCode = HttpStatusCode.OK
            };

            return message;
        } 

       //_images.UpLoadXXImage(model, files, UserInfo)返货一个是否上传成功的对象

 二：列表处图片上传

1，模板处理

<script type="text/html" id="radioTpl"> 
  <button class="layui-btn demoMore linehegith20" lay-data="{spid: '{{d.spid}}'}">上传图片</button>
</script>
模板
{ field: 'sex', title: '操作', templet: "#radioTpl", unresize: true }

2，页面渲染后调用方法

done: function (res, curr, count) {
 if(res.errorCode=="00"){
     _uploadImgNew();
 }
}

3，图片上传

 //图片设置
        _uploadImgNew = function () {
            layui.use('upload', function () {
                var $ = layui.jquery,upload = layui.upload;
                upload.render({
                    url: '/XX/UploadImg',
                    method: 'post',
                    elem: '.demoMore',
                    before: function () {
                        this.data = { 'spid': this.spid };
                    },
                   done: function (res, index, upload) {
                      //如果上传失败
                      if(res.code > 0){
                          return layer.msg('上传失败');
                      }                    
                       _GetNoSetList();  
                      return layer.msg('上传成功');
                 },
                error: function(){
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }
                });
            } );
        };