This commit is contained in:
许允枞 2025-03-24 11:30:11 +08:00
parent 29c187c785
commit 77c48e04f7
8 changed files with 236 additions and 145 deletions

View File

@ -2,15 +2,15 @@
// launchtypelocalremote, localremote
"version": "0.0",
"configurations": [{
"app-plus" :
"app-plus" :
{
"launchtype" : "local"
},
"default" :
"default" :
{
"launchtype" : "local"
},
"mp-weixin" :
"mp-weixin" :
{
"launchtype" : "local"
},

View File

@ -376,8 +376,6 @@ export default {
if (this.inspectionInfoId){
this.judgeUpdateLeadMan()
}
},
onShow() {
this.getindex()
uni.getStorage({
key: 'roleSelect',
@ -386,6 +384,8 @@ export default {
}
})
},
onShow() {
},
methods: {
judgeUpdateLeadMan(){
request({

View File

@ -321,8 +321,9 @@ export default {
// #endif
},
uploadSuccess(result) {
console.log(result,'返回结果')
this.result = result
this.box.filePath = result[0].data.url
this.box.filePath = result[0]
console.log(result)
console.log(this.box.filePath, '图片路径')
this.uploadWaiting = true

View File

@ -44,7 +44,9 @@
</view>
<view class="wimg" v-else>
<image src="../../static/imgs/wenjian.png" mode="" v-if="!item.isImage"></image>
<image :src="imageUrl + item.filePath" style="width: 100px;height: 100px;" v-else></image>
<!-- <image :src="imageUrl + item.filePath" style="width: 100px;height: 100px;" v-else></image>-->
<image :src="item.filePath.includes('http') ? item.filePath : imageUrl + item.filePath"
v-else></image>
</view>
<view class="file-name">{{ item.fileName }}</view>
<view class="" v-if="item.warnTime">{{ item.warnTime }}</view>
@ -243,8 +245,15 @@ export default {
viewFile(filePath) {
this.isLoading = true;
let url = ''
//http
if (filePath.indexOf('http') === -1) {
url = this.$baseImageUrl + '/' + filePath
}else {
url = filePath
}
uni.downloadFile({
url: this.$baseImageUrl + '/' + filePath,
url: url,
success: (res) => { // 使
var filePath = res.tempFilePath;
this.isLoading = false;

View File

@ -162,10 +162,10 @@ export default {
// }
// ],
tapList: [
{
text: "待支付",
value: "1"
},
// {
// text: "",
// value: "1"
// },
{
text: "待检测",
value: "2"

View File

@ -57,9 +57,9 @@
color: '#fff',
fontSize: '20px',
},
fileTitle:'上传附件'
fileTitle:'上传附件'
}
}
}
}
},
data() {
@ -69,7 +69,7 @@
let that = this;
// #ifdef APP-PLUS
var pages = getCurrentPages();
var page = pages[pages.length - 1];
var page = pages[pages.length - 1];
var currentWebview = page.$getAppWebview()
//
var wb = plus.webview.create(`/uni_modules/ss-upload/hybrid/html/file.html`, '', that.webviewStyle);
@ -81,19 +81,22 @@
},1500)//
//html
plus.globalEvent.addEventListener('plusMessage', function(msg) {
console.log(msg.data.args.data.arg)//web
console.log('msg',msg.data.args.data.arg)//web
let data = msg.data.args.data.arg;
if(data && data.filePath){
console.log('执行getFile')
let result = data.filePath
console.log('getFile',result)
that.$emit('getFile', result)
}
if(data && data.files){
let result = [JSON.parse(data.files)]
that.$emit('uploadSuccess', result)
// let result = [JSON.parse(data.files)]
// console.log('uploadSuccess',result)
that.$emit('uploadSuccess', data.files)
}
})
// #endif
},
methods: {
uploadFile() {
@ -204,4 +207,4 @@
line-height: 50px;
font-size: 20px;
}
</style>
</style>

View File

@ -1,131 +1,169 @@
<!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>
<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>
.head-btn {
text-align: center;
height: 100%;
width: 100%;
}
<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>
var files = []
var options = {}
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)
});
.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;
}
function upload() {
var formdata = new FormData(); // 创建一个form类型的数据
formdata.append("file", files[0]); // 获取上传文件的数据
for (let keys in options.formData) {
formdata.append(keys, options.formData[keys])
}
console.log("上传参数"+ formdata)
var xhr = new XMLHttpRequest();
xhr.open(options.type, options.url,true)
for(let key in options.header){
xhr.setRequestHeader(key,options.header[key])
}
xhr.upload.onprogress = function(ev) {
console.log(ev)
// ev.loaded 文件已经上传了多少
// ev.total 上传文件的总大小
var result = (ev.loaded / ev.total) * 100 + '%'
}
// 监听响应
xhr.onreadystatechange = function() {
console.log('状态'+xhr.readyState)
if (xhr.readyState == 4) {
if (xhr.status == 200) {
console.log('上传服务器返回结果'+xhr.responseText)
uni.postMessage({
data: {
files: xhr.responseText
}
})
}
}
}
xhr.send(formdata)
}
</script>
</body>
.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>

40
utils/cos.js Normal file
View File

@ -0,0 +1,40 @@
import COS from 'cos-js-sdk-v5';
import request from '@/utils/request'; // 引入你的封装请求方法
const cos = new COS({
// 其他配置项可参考下方 初始化配置项
// getAuthorization 必选参数
getAuthorization: function (options, callback) {
// 初始化时不会调用,只有调用 cos 方法(例如 cos.putObject时才会进入
// 异步获取临时密钥
// 服务端 JS 示例https://github.com/tencentyun/cos-js-sdk-v5/blob/master/server/
// 服务端其他语言参考 COS STS SDK https://github.com/tencentyun/qcloud-cos-sts-sdk
// STS 详细文档指引看https://cloud.tencent.com/document/product/436/14048
const stsUrl = '/cos/sts'; // 使用相对路径,避免本地开发跨域问题
request({
url: stsUrl,
method: 'GET'
}).then(response => {
console.log('执行了')
const data = response; // 适配你的 request 返回格式
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 // 细粒度控制权限需要设为 true
});
}).catch(error => {
console.error('获取临时密钥失败', error);
});
}
});
export default cos;