JavaScript使用toFixed保留一位小数的踩坑记录：TypeError: xxx.toFixed is not a function

<think>根据报错信息，`obj.pushFile(...).getFiles is not a function`，说明在Layui 2.11版本中，`obj.pushFile()`返回的对象并没有`getFiles`方法。这可能是由于版本差异导致的API变化。我们需要调整获取文件列表的方式。 在Layui 2.11的文档中，`pushFile`方法返回的是当前的上传实例，而文件列表存储在实例的`files`属性中（该属性是一个数组）。因此，我们可以这样修改： 原代码： var files = obj.pushFile().getFiles(); 修改为： var files = obj.pushFile().files; 或者，我们也可以直接使用`obj.files`（但注意，在Layui 2.11中，`obj.files`可能是一个类数组对象，我们可以将其转换为数组）： var files = Array.from(obj.files || []); 但根据Layui 2.11的文档，推荐使用`pushFile`方法获取实例，然后通过实例的`files`属性获取文件数组。 因此，我们调整代码： 完整修改后的代码： ```javascript upload.render({ elem: '#uploadBtn', url: '/upload', auto: false, bindAction: '#submitBtn', choose: function(obj) { // 修改点：使用 .files 而不是 .getFiles() var files = obj.pushFile().files; // 这里直接获取数组 // 创建文件列表HTML var html = ''; layui.each(files, function(index, file) { html += '<div class="layui-upload-file-item" data-index="' + index + '">' + '<i class="layui-icon layui-icon-file"></i>' + '<div class="file-info">' + '<div class="file-name">' + file.name + '</div>' + '<div class="file-size">' + formatFileSize(file.size) + '</div>' + '</div>' + '<i class="layui-icon layui-icon-close" onclick="deleteFile(this)"></i>' + '</div>'; }); $('#file-list').html(html); window.uploadFiles = files; // 存储为全局数组 } }); ``` 同时，我们之前定义的`deleteFile`函数和`formatFileSize`函数保持不变。 另外，注意在Layui 2.11中，`obj.pushFile()`返回的上传实例的`files`属性是一个数组，所以我们可以直接使用。 如果仍然遇到问题，我们可以尝试另一种方法：直接使用`obj.files`（这是一个FileList对象，需要转换为数组）： var files = Array.from(obj.files || []); 但根据Layui的文档，使用`pushFile`方法返回的实例的`files`属性是推荐做法。 因此，我们采用第一种修改方式。 如果修改后仍然报错，请检查Layui版本是否确实是2.11，因为不同的小版本也可能有差异。 下面提供两种方式，任选其一： 方式一（推荐，使用实例的files属性）： var files = obj.pushFile().files; 方式二（使用原生FileList转换）： var files = Array.from(obj.files || []); 我们选择方式一，因为这样获取的是Layui已经处理过的数组（可能包含一些额外的信息，但根据文档，它包含的就是文件对象数组）。 注意：在Layui 2.11中，`obj.pushFile()`返回的上传实例的`files`属性确实是一个数组，所以我们可以直接使用。 修改后的完整代码示例（仅修改了获取文件数组的方式）：</think>这个错误表明在 Layui 2.11 版本中，`obj.pushFile().getFiles()` 方法不存在。这是因为 Layui 在不同版本中 API 有所变化。以下是针对 Layui 2.11 的正确解决方案： ### 修复后的完整代码（Layui 2.11 兼容版） ```javascript upload.render({ elem: '#uploadBtn', url: '/upload', auto: false, bindAction: '#submitBtn', choose: function(obj) { // 正确获取文件列表的方式（Layui 2.11） // 直接使用 obj.files 并转换为数组 const files = Array.from(obj.files || []); // 或者使用原始文件输入框的文件列表 const rawFiles = Array.from(this.files || []); // 推荐使用第一种方式 const fileList = files; // 创建文件列表HTML let html = ''; layui.each(fileList, function(index, file) { html += `<div class="layui-upload-file-item" data-index="${index}"> <i class="layui-icon layui-icon-file"></i> <div class="file-info"> <div class="file-name">${file.name}</div> <div class="file-size">${formatFileSize(file.size)}</div> </div> <i class="layui-icon layui-icon-close" onclick="deleteFile(this)"></i> </div>`; }); // 更新文件列表显示 $('#file-list').html(html); // 存储文件列表到全局变量（重要！） window.uploadFiles = fileList; } }); // 文件大小格式化函数 function formatFileSize(bytes) { if (!bytes || bytes === 0) return '0 B'; const units = ['B', 'KB', 'MB', 'GB']; const i = Math.floor(Math.log(bytes) / Math.log(1024)); return (bytes / Math.pow(1024, i)).toFixed(2) + ' ' + units[i]; } // 文件删除函数 function deleteFile(element) { const $item = $(element).closest('.layui-upload-file-item'); const index = $item.data('index'); // 从全局文件列表中移除 if (window.uploadFiles && window.uploadFiles.length > index) { window.uploadFiles.splice(index, 1); } // 从DOM中移除 $item.remove(); // 更新所有文件的索引 $('.layui-upload-file-item').each(function(i) { $(this).data('index', i); }); } // 提交上传 $('#submitBtn').click(function() { if (!window.uploadFiles || window.uploadFiles.length === 0) { layer.msg('请先选择文件'); return; } // 创建FormData对象 const formData = new FormData(); $.each(window.uploadFiles, function(i, file) { formData.append('files[]', file); // 注意字段名 }); // 发送AJAX请求 $.ajax({ url: '/upload', type: 'POST', data: formData, contentType: false, processData: false, beforeSend: function() { layer.load(1); // 显示加载动画 }, success: function(res) { layer.closeAll('loading'); if (res.code === 0) { layer.msg('上传成功'); } else { layer.msg('上传失败: ' + res.msg); } }, error: function() { layer.closeAll('loading'); layer.msg('服务器错误'); } }); }); ``` ### 关键修改说明 1. **API 变更修复**： - 移除了 `obj.pushFile().getFiles()` 方法调用 - 使用 `Array.from(obj.files)` 直接转换文件列表 - 添加了空值保护 `obj.files || []` 2. **文件存储方式**： - 使用 `window.uploadFiles` 全局变量存储文件列表 - 在删除和提交时直接操作这个数组 3. **错误处理增强**： - 添加了加载状态提示 - 增加了服务器响应处理 - 加强了删除操作的安全检查 ### 完整HTML结构 ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui 2.11 文件上传</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.11.0/dist/css/layui.css"> <style> .layui-upload-list { margin-top: 15px; border: 1px solid #e6e6e6; border-radius: 2px; padding: 10px; } .layui-upload-file-item { display: flex; align-items: center; padding: 8px 10px; border-bottom: 1px solid #eee; } .layui-upload-file-item:last-child { border-bottom: none; } .file-info { flex: 1; margin-left: 10px; overflow: hidden; } .file-name { font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .file-size { color: #999; font-size: 12px; } .layui-upload-file-item .layui-icon-close { cursor: pointer; color: #ff5722; font-size: 18px; } </style> </head> <body> <div class="layui-container" style="margin-top: 20px;"> <!-- 上传按钮 --> <button type="button" id="uploadBtn" class="layui-btn"> <i class="layui-icon"></i>选择文件 </button> <!-- 提交按钮 --> <button type="button" id="submitBtn" class="layui-btn layui-btn-normal"> <i class="layui-icon"></i>开始上传 </button> <!-- 文件列表容器 --> <div id="file-list" class="layui-upload-list"></div> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/layui@2.11.0/dist/layui.js"></script> <script> // 上面的JavaScript代码放在这里 </script> </body> </html> ``` ### 调试建议 如果仍然遇到问题，可以在 `choose` 回调中添加调试信息： ```javascript choose: function(obj) { console.log('obj.files:', obj.files); console.log('obj.pushFile:', obj.pushFile); // 获取文件列表的备选方法 const files = this.files ? Array.from(this.files) : []; console.log('files:', files); // ...其余代码 } ```