flat:代码合并

This commit is contained in:
Apcallover
2025-12-19 10:37:41 +08:00
3 changed files with 48 additions and 47 deletions

View File

@@ -210,7 +210,6 @@
<view class="uploadfiles-list"> <view class="uploadfiles-list">
<view <view
class="file-uploadsend" class="file-uploadsend"
:class="{ 'file-border': isImage(file.type) }"
v-for="(file, index) in filesList" v-for="(file, index) in filesList"
:key="index" :key="index"
> >
@@ -219,7 +218,7 @@
@click="preViewImage(file)" @click="preViewImage(file)"
v-if="isImage(file.type)" v-if="isImage(file.type)"
:src="file.url" :src="file.url"
mode="scaleToFill" mode="heightFix"
></image> ></image>
<view class="file-doc" @click="jumpUrl(file)" v-else> <view class="file-doc" @click="jumpUrl(file)" v-else>
<FileIcon class="doc-icon" :type="file.type"></FileIcon> <FileIcon class="doc-icon" :type="file.type"></FileIcon>
@@ -1107,22 +1106,23 @@ image-margin-top = 40rpx
padding: 16rpx 20rpx 18rpx 20rpx padding: 16rpx 20rpx 18rpx 20rpx
height: calc(100% - 40rpx) height: calc(100% - 40rpx)
.doc-icon .doc-icon
width: 60rpx width: 60rpx;
height: 76rpx height: 76rpx;
margin-right: 20rpx margin-right: 20rpx;
.doc-con .doc-con
flex: 1 max-width:320rpx;
width: 0 overflow :hidden;
padding-right:40rpx;
box-sizing:border-box;
.file-uploadsend .file-uploadsend
margin: 10rpx 18rpx 0 0; margin: 10rpx 18rpx 0 0;
height: 100% height: 100%
font-size: 24rpx font-size: 24rpx
position: relative position: relative
min-width: 460rpx;
height: 160rpx; height: 160rpx;
border-radius: 12rpx 12rpx 12rpx 12rpx; border-radius: 12rpx 12rpx 12rpx 12rpx;
border: 2rpx solid #E2E2E2; border: 2rpx solid #E2E2E2;
overflow: hidden flex-shrink: 0;
.file-del .file-del
position: absolute position: absolute
right: 25rpx right: 25rpx
@@ -1155,8 +1155,8 @@ image-margin-top = 40rpx
color: #7B7B7B; color: #7B7B7B;
max-width: 100% max-width: 100%
.file-iconImg .file-iconImg
// height: 100% height: 100%
width: 100% // width: 100%
.filerow .filerow
display: flex display: flex
align-items: center align-items: center
@@ -1166,8 +1166,6 @@ image-margin-top = 40rpx
height: 20rpx height: 20rpx
width: 2rpx width: 2rpx
background: rgba(226, 226, 226, .9) background: rgba(226, 226, 226, .9)
.file-border
width: 160rpx !important;
@keyframes ai-circle { @keyframes ai-circle {
0% { 0% {

View File

@@ -18,7 +18,7 @@
body { body {
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei', sans-serif; 'Microsoft YaHei', sans-serif;
background: linear-gradient(to bottom, #4995FF 0%, #ffffff 100%); background: linear-gradient(to bottom, #4995ff 0%, #ffffff 100%);
min-height: 100vh; min-height: 100vh;
padding: 0; padding: 0;
color: #333; color: #333;
@@ -26,7 +26,7 @@
.container { .container {
min-height: 100vh; min-height: 100vh;
padding: 20px 20px ; padding: 20px 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
@@ -291,7 +291,7 @@
} }
.upload-btn { .upload-btn {
background: linear-gradient(135deg, #4191FE 0%, #a5c6f7 100%); background: linear-gradient(135deg, #4191fe 0%, #a5c6f7 100%);
color: white; color: white;
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
} }
@@ -499,7 +499,7 @@
font-size: 20px; font-size: 20px;
} }
} }
/* 限制提示样式 */ /* 限制提示样式 */
.limit-info { .limit-info {
background: #fff8e1; background: #fff8e1;
@@ -514,16 +514,16 @@
gap: 8px; gap: 8px;
animation: slideIn 0.3s ease; animation: slideIn 0.3s ease;
} }
.limit-info.show { .limit-info.show {
display: flex; display: flex;
} }
.limit-icon { .limit-icon {
font-size: 18px; font-size: 18px;
flex-shrink: 0; flex-shrink: 0;
} }
.limit-text { .limit-text {
flex: 1; flex: 1;
} }
@@ -542,16 +542,16 @@
gap: 8px; gap: 8px;
animation: slideIn 0.3s ease; animation: slideIn 0.3s ease;
} }
.limit-warning-info.show { .limit-warning-info.show {
display: flex; display: flex;
} }
.limit-warning-icon { .limit-warning-icon {
font-size: 18px; font-size: 18px;
flex-shrink: 0; flex-shrink: 0;
} }
.limit-warning-text { .limit-warning-text {
flex: 1; flex: 1;
} }
@@ -576,7 +576,7 @@
<span class="limit-warning-icon">⚠️</span> <span class="limit-warning-icon">⚠️</span>
<div class="limit-warning-text" id="limitWarningText">已超过文件上传总数限制</div> <div class="limit-warning-text" id="limitWarningText">已超过文件上传总数限制</div>
</div> </div>
<div class="upload-section"> <div class="upload-section">
<h3 class="section-title">📎 选择文件</h3> <h3 class="section-title">📎 选择文件</h3>
<div class="upload-area" id="uploadArea"> <div class="upload-area" id="uploadArea">
@@ -635,7 +635,7 @@
const sessionId = urlParams.get('sessionId'); const sessionId = urlParams.get('sessionId');
const uploadApi = urlParams.get('uploadApi'); const uploadApi = urlParams.get('uploadApi');
const fileCountParam = urlParams.get('fileCount'); const fileCountParam = urlParams.get('fileCount');
// 配置常量 // 配置常量
const MAX_FILE_COUNT = fileCountParam ? parseInt(fileCountParam) : 2; // 从URL参数获取默认为2 const MAX_FILE_COUNT = fileCountParam ? parseInt(fileCountParam) : 2; // 从URL参数获取默认为2
const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB
@@ -677,13 +677,13 @@
function init() { function init() {
// 更新限制提示文本 // 更新限制提示文本
updateLimitText(); updateLimitText();
// 显示限制提示 // 显示限制提示
limitInfo.classList.add('show'); limitInfo.classList.add('show');
// 检查本地存储中已上传的文件数量 // 检查本地存储中已上传的文件数量
checkUploadedCount(); checkUploadedCount();
// 事件监听 // 事件监听
fileInput.addEventListener('change', handleFileSelect); fileInput.addEventListener('change', handleFileSelect);
clearBtn.addEventListener('click', clearAllFiles); clearBtn.addEventListener('click', clearAllFiles);
@@ -723,11 +723,13 @@
// 检查已上传的文件数量 // 检查已上传的文件数量
function checkUploadedCount() { function checkUploadedCount() {
// 使用sessionStorage存储当前会话的上传数量 if (sessionStorage.getItem('sessionId') && sessionStorage.getItem('sessionId') != sessionId) {
// 如果要永久存储可以改用localStorage sessionStorage.setItem('uploadedFileCount', '0');
}
// // 使用sessionStorage存储当前会话的上传数量
// // 如果要永久存储可以改用localStorage
const storedCount = sessionStorage.getItem('uploadedFileCount'); const storedCount = sessionStorage.getItem('uploadedFileCount');
uploadedCount = storedCount ? parseInt(storedCount) : 0; uploadedCount = storedCount ? parseInt(storedCount) : 0;
// 更新警告提示 // 更新警告提示
updateWarningText(); updateWarningText();
} }
@@ -736,7 +738,7 @@
function updateWarningText() { function updateWarningText() {
if (MAX_FILE_COUNT > 0 && uploadedCount >= MAX_FILE_COUNT) { if (MAX_FILE_COUNT > 0 && uploadedCount >= MAX_FILE_COUNT) {
limitWarningInfo.classList.add('show'); limitWarningInfo.classList.add('show');
limitWarningText.textContent = `超过文件上传总数限制(${MAX_FILE_COUNT}个)`; limitWarningText.textContent = `文件上传总数限制(${MAX_FILE_COUNT}个)`;
} else { } else {
limitWarningInfo.classList.remove('show'); limitWarningInfo.classList.remove('show');
} }
@@ -766,7 +768,7 @@
e.preventDefault(); e.preventDefault();
return; return;
} }
e.preventDefault(); e.preventDefault();
uploadArea.classList.add('dragover'); uploadArea.classList.add('dragover');
}); });
@@ -821,7 +823,7 @@
} }
// 检查是否会导致超过总数限制 // 检查是否会导致超过总数限制
if (MAX_FILE_COUNT > 0 && (uploadedCount + selectedFiles.length) >= MAX_FILE_COUNT) { if (MAX_FILE_COUNT > 0 && uploadedCount + selectedFiles.length >= MAX_FILE_COUNT) {
showError(`已超过文件上传总数限制(${MAX_FILE_COUNT}个)`); showError(`已超过文件上传总数限制(${MAX_FILE_COUNT}个)`);
break; break;
} }
@@ -1011,18 +1013,18 @@
fileInput.disabled = true; fileInput.disabled = true;
uploadText.textContent = '文件上传总数已达上限'; uploadText.textContent = '文件上传总数已达上限';
uploadHint.innerHTML = `总共可上传 ${MAX_FILE_COUNT} 个文件<br />已上传: ${uploadedCount}`; uploadHint.innerHTML = `总共可上传 ${MAX_FILE_COUNT} 个文件<br />已上传: ${uploadedCount}`;
// 禁用按钮 // 禁用按钮
clearBtn.disabled = true; clearBtn.disabled = true;
uploadBtn.disabled = true; uploadBtn.disabled = true;
// 显示限制警告提示 // 显示限制警告提示
limitWarningInfo.classList.add('show'); limitWarningInfo.classList.add('show');
limitWarningText.textContent = `已超过文件上传总数限制(${MAX_FILE_COUNT}个)`; limitWarningText.textContent = `已超过文件上传总数限制(${MAX_FILE_COUNT}个)`;
} else { } else {
// 更新上传区域状态 // 更新上传区域状态
uploadArea.classList.remove('disabled'); uploadArea.classList.remove('disabled');
// 根据文件数量更新上传区域 // 根据文件数量更新上传区域
if (MAX_FILE_COUNT <= 0) { if (MAX_FILE_COUNT <= 0) {
// 如果没有设置文件数量限制,始终可以上传 // 如果没有设置文件数量限制,始终可以上传
@@ -1047,9 +1049,9 @@
// 更新上传按钮文本 // 更新上传按钮文本
if (hasFiles && !isTotalLimitReached) { if (hasFiles && !isTotalLimitReached) {
const totalSize = selectedFiles.reduce((sum, file) => sum + file.size, 0); const totalSize = selectedFiles.reduce((sum, file) => sum + file.size, 0);
uploadBtn.innerHTML = `<span>⬆️</span> 上传 (${selectedFiles.length}/${MAX_FILE_COUNT}, ${formatFileSize( uploadBtn.innerHTML = `<span>⬆️</span> 上传 (${
totalSize selectedFiles.length
)})`; }/${MAX_FILE_COUNT}, ${formatFileSize(totalSize)})`;
} else { } else {
uploadBtn.innerHTML = `<span>⬆️</span> 开始上传`; uploadBtn.innerHTML = `<span>⬆️</span> 开始上传`;
} }
@@ -1123,12 +1125,13 @@
// 更新已上传的文件数量 // 更新已上传的文件数量
uploadedCount += successCount; uploadedCount += successCount;
saveUploadedCount(); saveUploadedCount();
showSuccess(`成功上传 ${successCount} 个文件${failCount > 0 ? `${failCount} 个失败` : ''}`); showSuccess(`成功上传 ${successCount} 个文件${failCount > 0 ? `${failCount} 个失败` : ''}`);
// 清空文件列表 // 清空文件列表
clearAllFiles(); clearAllFiles();
// 更新UI // 更新UI
updateUI(); updateUI();
sessionStorage.setItem('sessionId', sessionId);
} else { } else {
showError('文件上传失败,请重试'); showError('文件上传失败,请重试');
} }
@@ -1246,4 +1249,4 @@
document.addEventListener('drop', (e) => e.preventDefault()); document.addEventListener('drop', (e) => e.preventDefault());
</script> </script>
</body> </body>
</html> </html>

View File

@@ -1,6 +1,6 @@
/** /**
* FileValidator.js * FileValidator.js
* 封装好的文件安全校验类 (ES Module) * 封装好的文件安全校验类
*/ */
// ========================================== // ==========================================
@@ -141,7 +141,7 @@ export class FileValidator {
// 获取文件头 Hex (读取足够长的字节以覆盖最长的魔数PNG需8字节) // 获取文件头 Hex (读取足够长的字节以覆盖最长的魔数PNG需8字节)
const fileHeader = this._bufferToHex(buffer.slice(0, 8)); const fileHeader = this._bufferToHex(buffer.slice(0, 8));
// 使用 startsWith 匹配 (兼容 4字节或8字节魔数) // 使用 startsWith 匹配
if (fileHeader.startsWith(expectedMagic)) { if (fileHeader.startsWith(expectedMagic)) {
isSafe = true; isSafe = true;
} else { } else {
@@ -154,7 +154,7 @@ export class FileValidator {
reader.onerror = () => reject('文件读取失败,无法校验'); reader.onerror = () => reject('文件读取失败,无法校验');
// 读取前 1KB 足够进行判断 // 读取前 1KB 进行判断
reader.readAsArrayBuffer(file.slice(0, 1024)); reader.readAsArrayBuffer(file.slice(0, 1024));
}); });
} }
@@ -170,12 +170,12 @@ export class FileValidator {
// imageValidator // imageValidator
// .validate(file) // .validate(file)
// .then(() => { // .then(() => {
// statusDiv.textContent = `检测通过: ${file.name}`; // statusDiv.textContent = `检测通过: ${file.name}`;
// statusDiv.style.color = 'green'; // statusDiv.style.color = 'green';
// console.log('图片校验通过,开始上传...'); // console.log('图片校验通过,开始上传...');
// // upload(file)... // // upload(file)...
// }) // })
// .catch((err) => { // .catch((err) => {
// statusDiv.textContent = `检测失败: ${err}`; // statusDiv.textContent = `检测失败: ${err}`;
// statusDiv.style.color = 'red'; // statusDiv.style.color = 'red';
// }); // });