最新代码
parent
dfc4a926a2
commit
b1494d01ae
|
|
@ -0,0 +1,390 @@
|
|||
<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>
|
||||
|
|
@ -67,6 +67,10 @@
|
|||
<text @tap="previewImageEv(2)">查看</text>
|
||||
<image @tap="uploadImgEv(2)" src="/static/public/icon-personInfo-upload.png" mode="widthFix" lazy-load style="width: 128rpx;height: 50rpx;"></image>
|
||||
</view>
|
||||
<!-- <view style="color: #f26803;" class="width100 disjbac">
|
||||
<text @tap="previewFileEv(2)">查看</text>
|
||||
<image @tap="uploadFileEv(2)" src="/static/public/icon-personInfo-upload.png" mode="widthFix" lazy-load style="width: 128rpx;height: 50rpx;"></image>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="bacf pad-sx30 pad-zy40 disac bbot">
|
||||
<view class="bold flexs mar-y40">签署工程师合作协议</view>
|
||||
|
|
@ -86,15 +90,19 @@
|
|||
<view class="person-btn" @tap="sumbmitData">提交保存</view>
|
||||
</view>
|
||||
</container-subgroup-two>
|
||||
<!-- 文件上传 -->
|
||||
<l-file ref="lFile" @up-success="upSuccess"></l-file>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
|
||||
import lFile from '@/components/l-file/l-file.vue';
|
||||
import { uploadImg } from '@/jsFile/public-api.js';
|
||||
export default {
|
||||
components:{
|
||||
containerSubgroupTwo
|
||||
containerSubgroupTwo,
|
||||
lFile
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -107,6 +115,9 @@
|
|||
imgList:[],
|
||||
flag:true,
|
||||
temporaryImg:[],
|
||||
imgUploadList:[],
|
||||
fileUploadList:[],
|
||||
uploadIndex:0,
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
|
|
@ -239,6 +250,8 @@
|
|||
uploadImgEv(index){
|
||||
if(index==0 || index==1){
|
||||
var countNum = 1;
|
||||
}else{
|
||||
var countNum = 9;
|
||||
}
|
||||
uni.chooseImage({
|
||||
count:countNum,
|
||||
|
|
@ -263,6 +276,7 @@
|
|||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 预览图片
|
||||
previewImageEv(current){
|
||||
let arr = [];
|
||||
|
|
@ -270,7 +284,6 @@
|
|||
this.imgList.forEach((item,index)=>{
|
||||
if(current==index){
|
||||
arr = item.split(',');
|
||||
console.log(arr,33333)
|
||||
};
|
||||
})
|
||||
if(arr.length) {
|
||||
|
|
@ -282,7 +295,79 @@
|
|||
} else {
|
||||
this.$toolAll.tools.showToast('请上传，再查看')
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 文件上传
|
||||
uploadFileEv(index) {
|
||||
const that = this;
|
||||
if(that.imgList[index].length >= 9){
|
||||
this.$toolAll.tools.showToast('最多上传9张')
|
||||
return;
|
||||
}
|
||||
that.$refs.lFile.upload({
|
||||
// #ifdef APP-PLUS
|
||||
currentWebview: that.$mp.page.$getAppWebview(),
|
||||
// #endif
|
||||
url: `${getApp().globalData.hostapi}/universal/api.upload/upload`, //你的上传附件接口地址
|
||||
name: 'file',
|
||||
dir:'files',
|
||||
header: {
|
||||
token:uni.getStorageSync('token') || ''
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
//上传成功
|
||||
upSuccess(res) {
|
||||
console.log(res,'上传附件')
|
||||
let url = res.root.url;
|
||||
let name = res.root.originalName;
|
||||
let fileType = this.isFileType(res.root.type);
|
||||
let size = res.root.size;
|
||||
if(fileType == 'image'){
|
||||
this.imgUploadList.push({url,name,fileType,size});
|
||||
}else{
|
||||
this.fileUploadList.push({url,name,fileType,size})
|
||||
}
|
||||
},
|
||||
|
||||
//根据文件后缀名来判断，展示对应的图标
|
||||
isImage(type){
|
||||
return ['png','jpg','jpeg','gif','svg'].includes(type.toLowerCase());
|
||||
},
|
||||
isDocx(type){
|
||||
return ['doc','docx'].includes(type.toLowerCase());
|
||||
},
|
||||
isXsls(type){
|
||||
return ['xsls','xsl'].includes(type.toLowerCase());
|
||||
},
|
||||
isText(type){
|
||||
return ['text','txt'].includes(type.toLowerCase());
|
||||
},
|
||||
isFileType(type){
|
||||
if(this.isImage(type)) return 'image';
|
||||
if(this.isXsls(type)) return 'excel';
|
||||
if(type == 'pdf') return 'pdf';
|
||||
if(this.isDocx(type)) return 'word';
|
||||
if(this.isText(type)) return "text";
|
||||
// return "#icon-file-b--6";
|
||||
},
|
||||
|
||||
//文件预览
|
||||
previewFileEv(item){
|
||||
uni.downloadFile({
|
||||
url: item.url,
|
||||
success: (res) => {
|
||||
let filePath = res.tempFilePath;
|
||||
uni.openDocument({
|
||||
filePath: filePath,
|
||||
success: (res) => {
|
||||
console.log('打开文档成功');
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue