layui 图片上传方法中，delete files[index]; 无效

在 layui 图片上传方法中，`delete files[index]` 不能直接删除上传队列中的图片。这是因为 layui 的图片上传模块内部使用的是 JavaScript 的对象（Object）来存储上传队列中的图片信息。使用 `delete` 关键字只是删除了对象中指定的属性，而不会重新排列对象的索引，因此会导致无法删除上传队列中的图片。

如果要删除上传队列中的图片，可以使用 `splice()` 方法，例如：

files.splice(index, 1);

其中 `files` 是上传队列数组，`index` 是要删除的图片的索引，`1` 表示要删除的元素个数为 1。这样就可以从上传队列中删除指定位置的图片了。

需要注意的是，删除上传队列中的图片并不会自动删除已上传的图片。如果要删除已上传的图片，需要在服务器端进行相应的操作。

相关问题

layui 图片上传方法中，如何在其他方法里面引用layui 图片上传的删除方法 delete

在 layui 中，图片上传组件包括两个方法，一个是上传方法 `upload`，一个是删除方法 `delete`。如果需要在其他方法中引用删除方法，可以在上传组件初始化时将删除方法保存在变量中，然后在需要的地方调用该方法即可。

例如，假设在某个页面中需要使用图片上传组件，并且在表单提交时需要将上传的图片一起提交到服务器。在初始化图片上传组件时，可以将删除方法保存在变量中，然后在表单提交时调用该方法。

// 初始化图片上传组件
layui.use(['upload', 'layer'], function() {
  const upload = layui.upload;
  const layer = layui.layer;

  // 保存删除方法
  let deleteMethod;

  // 初始化上传组件
  upload.render({
    elem: '#upload-btn', // 绑定元素
    url: '/upload', // 上传接口
    done: function(res) { // 上传成功回调
      console.log(res);
      // 保存删除方法
      deleteMethod = res.deleteMethod;
    },
    error: function() { // 上传失败回调
      layer.msg('上传失败');
    }
  });

  // 提交表单
  function submitForm() {
    // 获取表单数据
    const formData = {
      // ...
    };

    // 调用删除方法
    if (deleteMethod) {
      deleteMethod();
    }

    // 提交表单数据
    // ...
  }
});

在上面的代码中，首先使用 `layui.use()` 方法引入图片上传组件和弹窗组件，然后初始化上传组件，在上传成功回调中保存删除方法。最后，在提交表单方法中调用删除方法。

需要注意的是，上传成功回调中返回的 `res` 对象中可能包含多个文件的删除方法，如果需要删除指定文件，需要根据实际情况选择相应的删除方法。另外，删除方法只能在上传成功后才能获取到，如果在初始化上传组件时就需要使用删除方法，可以在上传失败回调中设置一个默认值。

layui 多图片上传

以下是layui多图片上传的示例代码：

<div class="layui-upload">
  <button type="button" class="layui-btn" id="testList">选择多文件</button>
  <button type="button" class="layui-btn" id="testListAction">开始上传</button>
  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
    预览图：
    <div class="layui-upload-list" id="demo2"></div>
  </blockquote>
</div>

<script>
layui.use('upload', function(){
  var $ = layui.jquery
  ,upload = layui.upload;

  //多文件列表示例
  var demoListView = $('#demo2')
  ,uploadListIns = upload.render({
    elem: '#testList'
    ,url: '/upload/'
    ,accept: 'images'
    ,multiple: true
    ,auto: false
    ,bindAction: '#testListAction'
    ,choose: function(obj){
      var files = obj.pushFile();
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        var tr = $(['<div class="layui-upload-item">'
          ,'<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">'
          ,'<div class="layui-upload-item-del">删除</div>'
        ,'</div>'].join(''));

        //删除
        tr.find('.layui-upload-item-del').on('click', function(){
          delete files[index]; //删除对应的文件
          tr.remove();
        });

        demoListView.append(tr);
      });
    }
    ,done: function(res, index, upload){
      if(res.code == 0){ //上传成功
        var tr = demoListView.find('tr#upload-'+ index)
        ,tds = tr.children();
        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
        tds.eq(3).html(''); //清空操作
        return delete this.files[index]; //删除文件队列已经上传成功的文件
      }
      this.error(index, upload);
    }
    ,error: function(index, upload){
      var tr = demoListView.find('tr#upload-'+ index)
      ,tds = tr.children();
      tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
      tds.eq(3).find('.layui-progress-bar').css('background-color', '#FF5722');
      tds.eq(3).find('.layui-progress-text').html('上传失败');
    }
  });
});
</script>

该示例使用了layui的upload模块，实现了多文件上传的功能。用户可以选择多个文件，然后点击“开始上传”按钮上传文件。上传成功后，文件会显示在预览区域中，并且可以删除。如果上传失败，会在上传进度条中显示错误信息。