391 lines
8.9 KiB
Vue
391 lines
8.9 KiB
Vue
|
<template>
|
|||
|
|
<view class="">
|
|||
|
|
<view class='t-toptips' :style="{top: top,background: cubgColor}" :class="[show?'t-top-show':'']">
|
|||
|
|
<view v-if="loading" class="flex flex-sub">
|
|||
|
|
<view class="cu-progress flex-sub round striped active sm">
|
|||
|
|
<view :style="{ background: color,width: value + '%'}"></view>
|
|||
|
|
</view>
|
|||
|
|
<text class="margin-left">{{value}}%</text>
|
|||
|
|
</view>
|
|||
|
|
<block v-else>{{msg}}</block>
|
|||
|
|
</view>
|
|||
|
|
<view ref="input" class="input">
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
props: {
|
|||
|
|
top: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'auto'
|
|||
|
|
},
|
|||
|
|
bgColor: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'rgba(49, 126, 243, 0.5)',
|
|||
|
|
},
|
|||
|
|
color: {
|
|||
|
|
type: String,
|
|||
|
|
default: '#e54d42',
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
cubgColor: '',
|
|||
|
|
loading: false,
|
|||
|
|
value: 5,
|
|||
|
|
show: false,
|
|||
|
|
msg: '执行完毕~',
|
|||
|
|
hParam: {}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
// #ifdef H5
|
|||
|
|
var input = document.createElement('input')
|
|||
|
|
input.type = 'file'
|
|||
|
|
// input.accept = '.zip'
|
|||
|
|
input.style.display = 'none'
|
|||
|
|
input.id = 'file'
|
|||
|
|
input.multiple = "multiple"
|
|||
|
|
input.onchange = (event) => {
|
|||
|
|
// 上传附件 获取文件信息
|
|||
|
|
this.fileinfo = event.target.files[0];
|
|||
|
|
// console.log("文件信息", this.fileinfo);
|
|||
|
|
//this.upload();
|
|||
|
|
this.hRequest(this.hParam)
|
|||
|
|
}
|
|||
|
|
this.$refs.input.$el.appendChild(input);
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
toast(title = '', {
|
|||
|
|
duration = 2000,
|
|||
|
|
icon = 'none'
|
|||
|
|
} = {}) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title,
|
|||
|
|
duration,
|
|||
|
|
icon
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
getRequest(url) {
|
|||
|
|
let theRequest = new Object();
|
|||
|
|
let index = url.indexOf("?");
|
|||
|
|
if (index != -1) {
|
|||
|
|
let str = url.substring(index + 1);
|
|||
|
|
let strs = str.split("&");
|
|||
|
|
for (let i = 0; i < strs.length; i++) {
|
|||
|
|
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return theRequest;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
上传说明：
|
|||
|
|
currentWebview: 当前窗口webview对象
|
|||
|
|
url：上传接口地址
|
|||
|
|
name：上传文件key值
|
|||
|
|
header: 上传接口请求头
|
|||
|
|
...：body内其他参数
|
|||
|
|
*/
|
|||
|
|
appChooseFile({
|
|||
|
|
currentWebview,
|
|||
|
|
url,
|
|||
|
|
name = 'file',
|
|||
|
|
header,
|
|||
|
|
...formData
|
|||
|
|
} = {}) {
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
let wv = plus.webview.create("", "/hybrid/html/index.html", {
|
|||
|
|
'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突
|
|||
|
|
top: 0,
|
|||
|
|
height: '100%',
|
|||
|
|
background: 'transparent'
|
|||
|
|
}, {
|
|||
|
|
url,
|
|||
|
|
header,
|
|||
|
|
formData,
|
|||
|
|
key: name,
|
|||
|
|
});
|
|||
|
|
wv.loadURL("/hybrid/html/index.html")
|
|||
|
|
currentWebview.append(wv);
|
|||
|
|
wv.overrideUrlLoading({
|
|||
|
|
mode: 'reject'
|
|||
|
|
}, (e) => {
|
|||
|
|
let {
|
|||
|
|
fileName,
|
|||
|
|
id
|
|||
|
|
} = this.getRequest(e.url);
|
|||
|
|
fileName = unescape(fileName);
|
|||
|
|
id = unescape(id);
|
|||
|
|
return this.onCommit(
|
|||
|
|
this.$emit('up-success', {
|
|||
|
|
fileName,
|
|||
|
|
data: {
|
|||
|
|
id,
|
|||
|
|
statusCode: 200
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
);
|
|||
|
|
});
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
wxChooseFile({
|
|||
|
|
url,
|
|||
|
|
name = 'file',
|
|||
|
|
header,
|
|||
|
|
...formData
|
|||
|
|
} = {}) {
|
|||
|
|
wx.chooseMessageFile({
|
|||
|
|
count: 2,
|
|||
|
|
type: 'file',
|
|||
|
|
success: ({
|
|||
|
|
tempFiles
|
|||
|
|
}) => {
|
|||
|
|
|
|||
|
|
let [{
|
|||
|
|
path: filePath,
|
|||
|
|
name: fileName
|
|||
|
|
}] = tempFiles;
|
|||
|
|
this.setdefUI();
|
|||
|
|
|
|||
|
|
return uni.uploadFile({
|
|||
|
|
url,
|
|||
|
|
name,
|
|||
|
|
filePath,
|
|||
|
|
formData,
|
|||
|
|
header,
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.statusCode == 200) {
|
|||
|
|
|
|||
|
|
let data = JSON.parse(res.data);
|
|||
|
|
|
|||
|
|
//可自行添加后台返回状态验证
|
|||
|
|
return this.onCommit(this.$emit('up-success', {
|
|||
|
|
fileName,
|
|||
|
|
data
|
|||
|
|
}));
|
|||
|
|
}
|
|||
|
|
return this.errorHandler('文件上传失败', this.upErr);
|
|||
|
|
},
|
|||
|
|
fail: () => this.errorHandler('文件上传失败', this.upErr)
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
fail: () => this.errorHandler('文件选择失败', this.upErr)
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
hChooseFile({
|
|||
|
|
url,
|
|||
|
|
name = 'file',
|
|||
|
|
header,
|
|||
|
|
...formData
|
|||
|
|
} = {}) {
|
|||
|
|
// #ifdef H5
|
|||
|
|
// this.hRequest()
|
|||
|
|
document.getElementById("file").click();
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
// h5上传请求
|
|||
|
|
hRequest({
|
|||
|
|
url,
|
|||
|
|
name = 'file',
|
|||
|
|
header,
|
|||
|
|
...formData
|
|||
|
|
} = {}) {
|
|||
|
|
// let mask = document.querySelector(".mask");
|
|||
|
|
// let fileDom = document.querySelector(".file");
|
|||
|
|
// let tis = document.querySelector(".tis");
|
|||
|
|
// let progress = document.querySelector(".tis-progress");
|
|||
|
|
// let cancel = document.querySelector(".cancel-btn");
|
|||
|
|
var file = document.getElementById("file").files[0];
|
|||
|
|
let createUpload = (file, url, key = 'file', header = {}, data = {}) => {
|
|||
|
|
console.log(`上传地址:${url}\n请求头:${JSON.stringify(header)}\n参数:${JSON.stringify(data)}`);
|
|||
|
|
if (!url) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
//tis.style.display = 'flex';
|
|||
|
|
let formData = new FormData();
|
|||
|
|
formData.append(key, file);
|
|||
|
|
for (let keys in data) {
|
|||
|
|
formData.append(keys, data[keys]);
|
|||
|
|
}
|
|||
|
|
let xhr = new XMLHttpRequest();
|
|||
|
|
xhr.open("POST", url, true);
|
|||
|
|
for (let keys in header) {
|
|||
|
|
xhr.setRequestHeader(keys, header[keys]);
|
|||
|
|
}
|
|||
|
|
xhr.upload.addEventListener("progress", function(event) {
|
|||
|
|
if (event.lengthComputable) {
|
|||
|
|
let percent = Math.ceil(event.loaded * 100 / event.total) + "%";
|
|||
|
|
// progress.innerText = `努力上传中..${percent}`;
|
|||
|
|
}
|
|||
|
|
}, false);
|
|||
|
|
xhr.ontimeout = function() {
|
|||
|
|
// xhr请求超时事件处理
|
|||
|
|
// progress.innerText = '请求超时';
|
|||
|
|
};
|
|||
|
|
xhr.onreadystatechange = (ev) => {
|
|||
|
|
if (xhr.readyState == 4) {
|
|||
|
|
console.log('status：' + xhr.status);
|
|||
|
|
if (xhr.status == 200) {
|
|||
|
|
let fileName = file.name;
|
|||
|
|
// progress.innerText = '上传成功';
|
|||
|
|
console.log('返回数据：' + xhr.responseText);
|
|||
|
|
//location.href = `callback?fileName=${escape(file.name)}&id=${escape(xhr.responseText)}`;
|
|||
|
|
return this.onCommit(
|
|||
|
|
this.$emit('up-success', {
|
|||
|
|
fileName,
|
|||
|
|
data: JSON.parse(xhr.response)
|
|||
|
|
})
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
return this.errorHandler('文件上传失败', this.upErr);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
xhr.send(formData);
|
|||
|
|
}
|
|||
|
|
createUpload(file, url, this.filename, header, {});
|
|||
|
|
},
|
|||
|
|
/*
|
|||
|
|
上传
|
|||
|
|
*/
|
|||
|
|
upload(param = {}) {
|
|||
|
|
if (!param.url) {
|
|||
|
|
this.toast('上传地址不正确');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (this.loading) {
|
|||
|
|
this.toast('还有个文件玩命处理中，请稍候..');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
return this.appChooseFile(param);
|
|||
|
|
// #endif
|
|||
|
|
|
|||
|
|
// #ifdef H5
|
|||
|
|
this.hParam = param;
|
|||
|
|
return this.hChooseFile(param);
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef MP-WEIXIN
|
|||
|
|
return this.wxChooseFile(param);
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
/*
|
|||
|
|
打开文件
|
|||
|
|
*/
|
|||
|
|
open(filePath) {
|
|||
|
|
let system = uni.getSystemInfoSync().platform;
|
|||
|
|
if (system == 'ios') {
|
|||
|
|
filePath = encodeURI(filePath);
|
|||
|
|
}
|
|||
|
|
uni.openDocument({
|
|||
|
|
filePath,
|
|||
|
|
success: (res) => {
|
|||
|
|
console.log('打开文档成功');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
/*
|
|||
|
|
下载
|
|||
|
|
type: temporary=返回临时地址，local=长期保存到本地
|
|||
|
|
*/
|
|||
|
|
download(url, type = 'temporary') {
|
|||
|
|
if (this.loading) {
|
|||
|
|
this.toast('还有个文件玩命处理中，请稍候..');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.setdefUI();
|
|||
|
|
return new Promise((resolve, reject) => {
|
|||
|
|
let downloadTask = uni.downloadFile({
|
|||
|
|
url,
|
|||
|
|
success: ({
|
|||
|
|
statusCode,
|
|||
|
|
tempFilePath
|
|||
|
|
}) => {
|
|||
|
|
if (statusCode === 200) {
|
|||
|
|
if (type == 'local') {
|
|||
|
|
uni.saveFile({
|
|||
|
|
tempFilePath,
|
|||
|
|
success: ({
|
|||
|
|
savedFilePath
|
|||
|
|
}) => this.onCommit(resolve(savedFilePath)),
|
|||
|
|
fail: () => this.errorHandler('下载失败', reject)
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
this.onCommit(resolve(tempFilePath))
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
fail: () => this.errorHandler('下载失败', reject)
|
|||
|
|
});
|
|||
|
|
downloadTask.onProgressUpdate(({
|
|||
|
|
progress = 0
|
|||
|
|
}) => {
|
|||
|
|
if (progress <= 100) {
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.value = progress;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
onCommit(resolve) {
|
|||
|
|
this.msg = '执行完毕~';
|
|||
|
|
this.loading = false;
|
|||
|
|
this.cubgColor = 'rgba(57, 181, 74, 0.5)';
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.show = false;
|
|||
|
|
}, 1500);
|
|||
|
|
return resolve;
|
|||
|
|
},
|
|||
|
|
setdefUI() {
|
|||
|
|
this.cubgColor = this.bgColor;
|
|||
|
|
this.value = 0;
|
|||
|
|
this.loading = true;
|
|||
|
|
this.show = true;
|
|||
|
|
},
|
|||
|
|
upErr(errText) {
|
|||
|
|
this.$emit('up-error', errText);
|
|||
|
|
},
|
|||
|
|
errorHandler(errText, reject) {
|
|||
|
|
this.msg = errText;
|
|||
|
|
this.loading = false;
|
|||
|
|
this.cubgColor = 'rgba(229, 77, 66, 0.5)';
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.show = false;
|
|||
|
|
}, 1500);
|
|||
|
|
return reject(errText);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.t-toptips {
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 18upx 30upx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
position: fixed;
|
|||
|
|
z-index: 90;
|
|||
|
|
color: #fff;
|
|||
|
|
font-size: 30upx;
|
|||
|
|
left: 0;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
word-break: break-all;
|
|||
|
|
opacity: 0;
|
|||
|
|
transform: translateZ(0) translateY(-100%);
|
|||
|
|
transition: all 0.3s ease-in-out;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.t-top-show {
|
|||
|
|
transform: translateZ(0) translateY(0);
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
</style>
|