flat:代码合并
This commit is contained in:
@@ -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% {
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
@@ -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';
|
||||||
// });
|
// });
|
||||||
Reference in New Issue
Block a user