170 lines
5.2 KiB
HTML
170 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>上传文件</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.head-btn {
|
|
text-align: center;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.file {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100%;
|
|
width: 100%;
|
|
text-decoration: none;
|
|
text-indent: 0;
|
|
overflow: hidden;
|
|
color: transparent;
|
|
}
|
|
|
|
.fileName {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.file input {
|
|
position: absolute;
|
|
font-size: 20px;
|
|
right: 0;
|
|
top: 0;
|
|
opacity: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="head-btn">
|
|
<form action="" method="post">
|
|
<a href="javascript:;" class="file" id="selectFile">
|
|
<span class="fileName"></span>
|
|
<input type="file" name="uploadFile" id="uploadFile">
|
|
</a>
|
|
</form>
|
|
</div>
|
|
|
|
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
|
|
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
|
|
</script>
|
|
<script src="https://cdn.jsdelivr.net/npm/cos-js-sdk-v5/dist/cos-js-sdk-v5.min.js"></script>
|
|
<script>
|
|
|
|
var files = []
|
|
var options = {}
|
|
var cos = new COS({
|
|
getAuthorization: function (options, callback) {
|
|
// 使用 fetch 发送请求
|
|
fetch('http://122.51.230.86:48080/admin-api/cos/sts',{
|
|
headers: {
|
|
'Content-Type': 'application/json', // 指定 JSON 格式
|
|
'Tenant-Id': '180' // 添加 tenantId 头部
|
|
}
|
|
})
|
|
.then(response => response.json()) // 解析 JSON 数据
|
|
.then(data => {
|
|
if (!data || !data.credentials) {
|
|
return console.error('credentials invalid:\n' + JSON.stringify(data, null, 2));
|
|
}
|
|
const { credentials } = data;
|
|
callback({
|
|
TmpSecretId: credentials.tmpSecretId,
|
|
TmpSecretKey: credentials.tmpSecretKey,
|
|
SecurityToken: credentials.sessionToken,
|
|
StartTime: data.startTime, // 时间戳，单位秒
|
|
ExpiredTime: data.expiredTime, // 时间戳，单位秒
|
|
ScopeLimit: true
|
|
});
|
|
})
|
|
.catch(error => {
|
|
console.error('获取临时密钥失败', error);
|
|
});
|
|
}
|
|
});
|
|
|
|
function passInfo(info) {
|
|
options = info;
|
|
console.log('接口相关参数' + JSON.stringify(info))
|
|
}
|
|
|
|
function setStyle(info) {
|
|
console.log('样式' + info.fileStyle)
|
|
for (let k in info.fileStyle) {
|
|
$(".file").css(k, info.fileStyle[k])
|
|
}
|
|
$('.fileName').html(info.fileTitle)
|
|
}
|
|
|
|
// console.log(44456,getQuery('token')); // 调用获取参数
|
|
$(".file").on("change", "input[type='file']", function () {
|
|
files = [];
|
|
let filePath = $(this).val();
|
|
console.log(filePath)
|
|
uni.postMessage({
|
|
data: {
|
|
filePath: filePath,
|
|
}
|
|
})
|
|
console.log(document.getElementById('uploadFile').files[0])
|
|
let file = document.getElementById('uploadFile').files[0];
|
|
files.push(file)
|
|
console.log(JSON.stringify(files))
|
|
if (options.url) {
|
|
upload()
|
|
}
|
|
console.log(files.length)
|
|
});
|
|
|
|
function upload() {
|
|
if (!files || files.length === 0) {
|
|
console.error("未选择文件");
|
|
return;
|
|
}
|
|
|
|
const file = files[0]; // 获取第一个文件
|
|
const fileName = file.name; // 获取文件名
|
|
const Bucket = 'lanan-1319802091'; // 请替换成你的 COS 存储桶名称
|
|
const Region = 'ap-chengdu'; // 请替换成你的 COS 地域，如 'ap-shanghai'
|
|
const Key = 'uploads/' + fileName; // 你希望存储在 COS 中的路径
|
|
|
|
console.log("开始上传文件:", fileName);
|
|
|
|
cos.uploadFile({
|
|
Bucket,
|
|
Region,
|
|
Key,
|
|
Body: file, // 直接使用 File 对象
|
|
onProgress: function (progressData) {
|
|
console.log('上传进度:', JSON.stringify(progressData));
|
|
}
|
|
}, function (err, data) {
|
|
if (err) {
|
|
console.error('上传失败:', err);
|
|
} else {
|
|
console.log('上传成功:', data);
|
|
uni.postMessage({
|
|
data: {
|
|
files: ['https://' + data.Location] // 返回 COS 上的文件访问 URL
|
|
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|