|
|
|
@@ -1,296 +1,293 @@ |
|
|
|
<template> |
|
|
|
<view class="cu-form-group"> |
|
|
|
<view class="grid col-4 grid-square flex-sub"> |
|
|
|
<view |
|
|
|
v-for="(item, index) in imgList" |
|
|
|
@tap="viewImg(item)" |
|
|
|
:key="index" |
|
|
|
class="bg-img" |
|
|
|
> |
|
|
|
<!-- {{API + '/user/img?data=' + (path.path ? path.path : path)}} --> |
|
|
|
<image |
|
|
|
v-if="showfile()&&isImage(item.type)" |
|
|
|
:src="CONFIG('webHost') + item.url" |
|
|
|
mode="aspectFill" |
|
|
|
></image> |
|
|
|
<l-icon v-if="showfile()&&!isImage(item.type)" type="text" /> |
|
|
|
<text class="file-name">{{item.name}}</text> |
|
|
|
<view v-if="!readonly" @tap.stop="delImg(index)" class="cu-tag bg-red" style="width: 18px; height: 18px; font-size: 24px"> |
|
|
|
<l-icon |
|
|
|
type="close" |
|
|
|
style="width: 18px; height: 18px; font-size: 12px" |
|
|
|
/> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="cu-form-group"> |
|
|
|
<view class="grid col-4 grid-square flex-sub"> |
|
|
|
<view v-for="(item, index) in imgList" @tap="viewImg(item)" :key="index" class="bg-img"> |
|
|
|
<image v-if="showfile()&&isImage(item.type)" :src="CONFIG('webHost') + item.url" mode="aspectFill"> |
|
|
|
</image> |
|
|
|
<l-icon v-if="showfile()&&!isImage(item.type)" type="text" /> |
|
|
|
<text class="file-name">{{item.name}}</text> |
|
|
|
<view v-if="!readonly" @tap.stop="delImg(index)" class="cu-tag bg-red" |
|
|
|
style="width: 18px; height: 18px; font-size: 24px"> |
|
|
|
<l-icon type="close" style="width: 18px; height: 18px; font-size: 12px" /> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view v-show="!readonly && imgList.length < Number(number)&&isShow" class="solids"> |
|
|
|
<!-- @tap="chooseImg" --> |
|
|
|
<l-icon type="file" /> |
|
|
|
<lsj-upload ref="lsjUpload" height="80px" width="100%" :size="20" :option="{}" :count="1" |
|
|
|
@change="chooseChange" style="opacity: 0;"></lsj-upload> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view |
|
|
|
v-show="!readonly && imgList.length < Number(number)&&isShow" |
|
|
|
class="solids" |
|
|
|
> |
|
|
|
<!-- @tap="chooseImg" --> |
|
|
|
<l-icon type="file" /> |
|
|
|
<lsj-upload |
|
|
|
ref="lsjUpload" |
|
|
|
height="80px" |
|
|
|
width="100%" |
|
|
|
:size="20" |
|
|
|
:option="{}" |
|
|
|
:count="1" |
|
|
|
@change="chooseChange" |
|
|
|
style="opacity: 0;" |
|
|
|
></lsj-upload> |
|
|
|
</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
export default { |
|
|
|
export default { |
|
|
|
|
|
|
|
props: { |
|
|
|
number: { default: 1 }, |
|
|
|
readonly: {}, |
|
|
|
value: { default: () => [] }, |
|
|
|
folderId:{}, |
|
|
|
}, |
|
|
|
|
|
|
|
data(){ |
|
|
|
return{ |
|
|
|
isShow:false, |
|
|
|
imgList:[], |
|
|
|
} |
|
|
|
}, |
|
|
|
props: { |
|
|
|
number: { |
|
|
|
default: 1 |
|
|
|
}, |
|
|
|
readonly: {}, |
|
|
|
value: { |
|
|
|
default: () => [] |
|
|
|
}, |
|
|
|
folderId: {}, |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
chooseChange(files){ |
|
|
|
let array = Array.from(files); |
|
|
|
if(array.length){ |
|
|
|
this.$refs.lsjUpload.clear() |
|
|
|
} |
|
|
|
let tempFilePaths = [],tempFiles=[]; |
|
|
|
array.forEach(item=>{ |
|
|
|
tempFilePaths.push(item[1].path) |
|
|
|
tempFiles.push(item[1].file) |
|
|
|
}) |
|
|
|
this.chooseChangeback(tempFilePaths,tempFiles) |
|
|
|
}, |
|
|
|
delImg(index) { |
|
|
|
this.LOADING('正在删除…'); |
|
|
|
const newList = JSON.parse(JSON.stringify(this.imgList)); |
|
|
|
this.HTTP_POST('StuInfoFresh/deleteFiles', {id:this.imgList[index].id},"文件删除失败").then((data) => { |
|
|
|
this.HIDE_LOADING(); |
|
|
|
if (data) { |
|
|
|
newList.splice(index, 1); |
|
|
|
this.imgList = newList |
|
|
|
|
|
|
|
this.$emit("update:value", newList); |
|
|
|
this.$emit("input", newList); |
|
|
|
this.$emit("change"); |
|
|
|
this.$emit("del"); |
|
|
|
data() { |
|
|
|
return { |
|
|
|
isShow: false, |
|
|
|
imgList: [], |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
showfile() { |
|
|
|
return true; |
|
|
|
}, |
|
|
|
|
|
|
|
async chooseChangeback(tempFilePaths,tempFiles) { |
|
|
|
// let {tempFilePaths,tempFiles} = res |
|
|
|
// if(!this.validate(tempFiles))return |
|
|
|
let uploadImageRes = await this.uploadImage(tempFilePaths[0],tempFiles[0]?tempFiles[0].name:"") |
|
|
|
let newList = this.imgList || [] |
|
|
|
if(uploadImageRes){ |
|
|
|
newList = JSON.parse(JSON.stringify(newList)).concat(uploadImageRes); |
|
|
|
} |
|
|
|
|
|
|
|
this.imgList = newList |
|
|
|
|
|
|
|
this.$emit("update:value", newList); |
|
|
|
this.$emit("input", newList); |
|
|
|
this.$emit("change",newList); |
|
|
|
this.$emit("add"); |
|
|
|
}, |
|
|
|
|
|
|
|
uploadImage(url,name){ |
|
|
|
if(!url)return |
|
|
|
// 文件上传 |
|
|
|
return new Promise(async (reslove,reject)=>{ |
|
|
|
this.LOADING('正在上传…'); |
|
|
|
let params = name?{folderId:this.folderId,name}:{folderId:this.folderId} |
|
|
|
this.HTTP_UPLOAD2('StuInfoFresh/upload', url,params).then((data) => { |
|
|
|
this.HIDE_LOADING(); |
|
|
|
this.$refs.lsjUpload.show() |
|
|
|
if (data) { |
|
|
|
// this.HTTP_GET('StuInfoFresh/upload', {fileId:data}) |
|
|
|
reslove([{ |
|
|
|
id:data.F_Id, |
|
|
|
name:data.F_FileName, |
|
|
|
url:data.F_FilePath, |
|
|
|
type:data.F_FileType, |
|
|
|
}]) |
|
|
|
}else{ |
|
|
|
reject('上传失败！') |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
chooseChange(files) { |
|
|
|
let array = Array.from(files); |
|
|
|
if (array.length) { |
|
|
|
this.$refs.lsjUpload.clear() |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
ceshi(){ |
|
|
|
function apiFn(params){ |
|
|
|
return new Promise((resolve,reject)=>{ |
|
|
|
this.LOADING('正在上传…'); |
|
|
|
this.HTTP_UPLOAD2('StuInfoFresh/upload', params.url,{folderId:this.folderId}).then((data) => { |
|
|
|
this.HIDE_LOADING(); |
|
|
|
if (data) { |
|
|
|
// this.HTTP_GET('StuInfoFresh/upload', {fileId:data}) |
|
|
|
this.imgList[params.index] = [{ |
|
|
|
id:data.F_Id, |
|
|
|
name:data.F_FileName, |
|
|
|
url:data.F_FilePath, |
|
|
|
type:data.F_FileType |
|
|
|
}] |
|
|
|
reslove(this.imgList[params.index]) |
|
|
|
}else{ |
|
|
|
reject('上传失败！') |
|
|
|
let tempFilePaths = [], |
|
|
|
tempFiles = []; |
|
|
|
array.forEach(item => { |
|
|
|
tempFilePaths.push(item[1].path) |
|
|
|
tempFiles.push(item[1].file) |
|
|
|
}) |
|
|
|
this.chooseChangeback(tempFilePaths, tempFiles) |
|
|
|
}, |
|
|
|
delImg(index) { |
|
|
|
this.CONFIRM("", "是否确认删除？", true).then(res => { |
|
|
|
if(!res)return |
|
|
|
this.LOADING('正在删除…'); |
|
|
|
const newList = JSON.parse(JSON.stringify(this.imgList)); |
|
|
|
this.HTTP_POST('StuInfoFresh/deleteFiles', { |
|
|
|
id: this.imgList[index].id |
|
|
|
}, "文件删除失败").then((data) => { |
|
|
|
this.HIDE_LOADING(); |
|
|
|
if (data) { |
|
|
|
newList.splice(index, 1); |
|
|
|
this.imgList = newList |
|
|
|
|
|
|
|
this.$emit("update:value", newList); |
|
|
|
this.$emit("input", newList); |
|
|
|
this.$emit("change"); |
|
|
|
this.$emit("del"); |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
showfile() { |
|
|
|
return true; |
|
|
|
}, |
|
|
|
|
|
|
|
async chooseChangeback(tempFilePaths, tempFiles) { |
|
|
|
// let {tempFilePaths,tempFiles} = res |
|
|
|
// if(!this.validate(tempFiles))return |
|
|
|
let uploadImageRes = await this.uploadImage(tempFilePaths[0], tempFiles[0] ? tempFiles[0].name : "") |
|
|
|
let newList = this.imgList || [] |
|
|
|
if (uploadImageRes) { |
|
|
|
newList = JSON.parse(JSON.stringify(newList)).concat(uploadImageRes); |
|
|
|
} |
|
|
|
|
|
|
|
this.imgList = newList |
|
|
|
|
|
|
|
this.$emit("update:value", newList); |
|
|
|
this.$emit("input", newList); |
|
|
|
this.$emit("change", newList); |
|
|
|
// this.$emit("add"); |
|
|
|
}, |
|
|
|
|
|
|
|
uploadImage(url, name) { |
|
|
|
if (!url) return |
|
|
|
// 文件上传 |
|
|
|
return new Promise(async (reslove, reject) => { |
|
|
|
this.LOADING('正在上传…'); |
|
|
|
let params = name ? { |
|
|
|
folderId: this.folderId, |
|
|
|
name |
|
|
|
} : { |
|
|
|
folderId: this.folderId |
|
|
|
} |
|
|
|
this.HTTP_UPLOAD2('StuInfoFresh/upload', url, params).then((data) => { |
|
|
|
this.HIDE_LOADING(); |
|
|
|
this.$refs.lsjUpload.show() |
|
|
|
if (data) { |
|
|
|
// this.HTTP_GET('StuInfoFresh/upload', {fileId:data}) |
|
|
|
reslove([{ |
|
|
|
id: data.F_Id, |
|
|
|
name: data.F_FileName, |
|
|
|
url: data.F_FilePath, |
|
|
|
type: data.F_FileType, |
|
|
|
}]) |
|
|
|
} else { |
|
|
|
reject('上传失败！') |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
let array = this.imgList.map(item=>{ |
|
|
|
if(item.id){ |
|
|
|
return "" |
|
|
|
}else{ |
|
|
|
return { |
|
|
|
url:"learun/adms/annexes/upload" |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
ceshi() { |
|
|
|
function apiFn(params) { |
|
|
|
return new Promise((resolve, reject) => { |
|
|
|
this.LOADING('正在上传…'); |
|
|
|
this.HTTP_UPLOAD2('StuInfoFresh/upload', params.url, { |
|
|
|
folderId: this.folderId |
|
|
|
}).then((data) => { |
|
|
|
this.HIDE_LOADING(); |
|
|
|
if (data) { |
|
|
|
// this.HTTP_GET('StuInfoFresh/upload', {fileId:data}) |
|
|
|
this.imgList[params.index] = [{ |
|
|
|
id: data.F_Id, |
|
|
|
name: data.F_FileName, |
|
|
|
url: data.F_FilePath, |
|
|
|
type: data.F_FileType |
|
|
|
}] |
|
|
|
reslove(this.imgList[params.index]) |
|
|
|
} else { |
|
|
|
reject('上传失败！') |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
this.promiseAllLimit(2,[1,2,3,4,5,6,7,8,9],a).then(res=>{ |
|
|
|
console.log(res) |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* @description 控制promise.all并发数量 |
|
|
|
* @param limit 并发数 |
|
|
|
* @param array 参数列表 |
|
|
|
* @param apiFn 执行函数 |
|
|
|
* @returns {Promise<Awaited<unknown>[]>} |
|
|
|
*/ |
|
|
|
async promiseAllLimit(limit, array, apiFn) { |
|
|
|
const ret = [] // 用于存放所有的promise实例 |
|
|
|
const executing = [] // 用于存放目前正在执行的promise |
|
|
|
for (const item of array) { |
|
|
|
const p = apiFn(item) |
|
|
|
ret.push(p) |
|
|
|
if (limit <= array.length) { |
|
|
|
// then回调中，当这个promise状态变为fulfilled后，将其从正在执行的promise列表executing中删除 |
|
|
|
const e = p.then(() => executing.splice(executing.indexOf(e), 1)) |
|
|
|
executing.push(e) |
|
|
|
if (executing.length >= limit) { |
|
|
|
// 一旦正在执行的promise列表数量等于限制数，就使用Promise.race等待某一个promise状态发生变更， |
|
|
|
// 状态变更后，就会执行上面then的回调，将该promise从executing中删除， |
|
|
|
// 然后再进入到下一次for循环，生成新的promise进行补充 |
|
|
|
await Promise.race(executing) |
|
|
|
let array = this.imgList.map(item => { |
|
|
|
if (item.id) { |
|
|
|
return "" |
|
|
|
} else { |
|
|
|
return { |
|
|
|
url: "learun/adms/annexes/upload" |
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
this.promiseAllLimit(2, [1, 2, 3, 4, 5, 6, 7, 8, 9], a).then(res => { |
|
|
|
console.log(res) |
|
|
|
}) |
|
|
|
}, |
|
|
|
|
|
|
|
/** |
|
|
|
* @description 控制promise.all并发数量 |
|
|
|
* @param limit 并发数 |
|
|
|
* @param array 参数列表 |
|
|
|
* @param apiFn 执行函数 |
|
|
|
* @returns {Promise<Awaited<unknown>[]>} |
|
|
|
*/ |
|
|
|
async promiseAllLimit(limit, array, apiFn) { |
|
|
|
const ret = [] // 用于存放所有的promise实例 |
|
|
|
const executing = [] // 用于存放目前正在执行的promise |
|
|
|
for (const item of array) { |
|
|
|
const p = apiFn(item) |
|
|
|
ret.push(p) |
|
|
|
if (limit <= array.length) { |
|
|
|
// then回调中，当这个promise状态变为fulfilled后，将其从正在执行的promise列表executing中删除 |
|
|
|
const e = p.then(() => executing.splice(executing.indexOf(e), 1)) |
|
|
|
executing.push(e) |
|
|
|
if (executing.length >= limit) { |
|
|
|
// 一旦正在执行的promise列表数量等于限制数，就使用Promise.race等待某一个promise状态发生变更， |
|
|
|
// 状态变更后，就会执行上面then的回调，将该promise从executing中删除， |
|
|
|
// 然后再进入到下一次for循环，生成新的promise进行补充 |
|
|
|
await Promise.race(executing) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
return Promise.all(ret) |
|
|
|
}, |
|
|
|
|
|
|
|
validate(array){ |
|
|
|
// let type = array.every(item=>{ |
|
|
|
// return item.type && item.type.substring(0,6) == "image/" |
|
|
|
// }) |
|
|
|
// if(!type){ |
|
|
|
// this.TOAST('文件类型错误'); |
|
|
|
// return false |
|
|
|
// } |
|
|
|
let size = array.every(item=>{ |
|
|
|
return item.size && item.size <= 200 * 1024 * 1024 |
|
|
|
}) |
|
|
|
if(!size){ |
|
|
|
this.TOAST('文件大小不得超过200M'); |
|
|
|
return false |
|
|
|
} |
|
|
|
return true |
|
|
|
}, |
|
|
|
|
|
|
|
isImage(type){ |
|
|
|
if(type&&type.length){ |
|
|
|
return ["png","jpg"].includes(type.substring(type.length-3,type.length)) |
|
|
|
}else{ |
|
|
|
return false |
|
|
|
} |
|
|
|
}, |
|
|
|
return Promise.all(ret) |
|
|
|
}, |
|
|
|
|
|
|
|
viewImg(item) { |
|
|
|
if(!this.isImage(item.type)){ |
|
|
|
window.location.href = this.CONFIG("webHost")+item.url |
|
|
|
}else{ |
|
|
|
uni.previewImage({ |
|
|
|
urls: [this.CONFIG('webHost')+item.url], |
|
|
|
current: this.CONFIG('webHost')+item.url |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// previewFile() { |
|
|
|
// var file = document.querySelector('input[type=file]').files[0]; |
|
|
|
// var reader = new FileReader(); |
|
|
|
// // fileReader.readAsDataURL(blob); |
|
|
|
// // fileReader.onerror = () => { |
|
|
|
// // reject(new Error('blobToBase64 error')); |
|
|
|
// // }; |
|
|
|
// // var encodedData = window.btoa("Hello, world"); |
|
|
|
// reader.onloadend = function () { |
|
|
|
// //$('#PhotoImg').attr('src', reader.result); |
|
|
|
// var postData = { |
|
|
|
// Base64Url: reader.result |
|
|
|
// } |
|
|
|
// this.HTTP_POST(config.webapi + "StuInfoFresh/savePhoto", postData, (data) => { |
|
|
|
// if (data) { |
|
|
|
// $('#Photo').val(data.AnnexesFileId); |
|
|
|
// $('#PhotoImg').attr('src', config.web + data.Url); |
|
|
|
// } else { |
|
|
|
// learun.layer.toast('采集照片信息失败！'); |
|
|
|
// } |
|
|
|
// }); |
|
|
|
// } |
|
|
|
// if (file) { |
|
|
|
// reader.readAsDataURL(file); |
|
|
|
// } |
|
|
|
// }, |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.imgList = JSON.parse(JSON.stringify(this.value.map(item=>{ |
|
|
|
return { |
|
|
|
id:item.F_Id, |
|
|
|
name:item.F_FileName, |
|
|
|
url:item.F_FilePath, |
|
|
|
type:item.F_FileType |
|
|
|
validate(array) { |
|
|
|
// let type = array.every(item=>{ |
|
|
|
// return item.type && item.type.substring(0,6) == "image/" |
|
|
|
// }) |
|
|
|
// if(!type){ |
|
|
|
// this.TOAST('文件类型错误'); |
|
|
|
// return false |
|
|
|
// } |
|
|
|
let size = array.every(item => { |
|
|
|
return item.size && item.size <= 200 * 1024 * 1024 |
|
|
|
}) |
|
|
|
if (!size) { |
|
|
|
this.TOAST('文件大小不得超过200M'); |
|
|
|
return false |
|
|
|
} |
|
|
|
return true |
|
|
|
}, |
|
|
|
|
|
|
|
isImage(type) { |
|
|
|
if (type && type.length) { |
|
|
|
return ["png", "jpg"].includes(type.substring(type.length - 3, type.length)) |
|
|
|
} else { |
|
|
|
return false |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
viewImg(item) { |
|
|
|
if (!this.isImage(item.type)) { |
|
|
|
window.location.href = this.CONFIG("webHost") + item.url |
|
|
|
} else { |
|
|
|
uni.previewImage({ |
|
|
|
urls: [this.CONFIG('webHost') + item.url], |
|
|
|
current: this.CONFIG('webHost') + item.url |
|
|
|
}); |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
// previewFile() { |
|
|
|
// var file = document.querySelector('input[type=file]').files[0]; |
|
|
|
// var reader = new FileReader(); |
|
|
|
// // fileReader.readAsDataURL(blob); |
|
|
|
// // fileReader.onerror = () => { |
|
|
|
// // reject(new Error('blobToBase64 error')); |
|
|
|
// // }; |
|
|
|
// // var encodedData = window.btoa("Hello, world"); |
|
|
|
// reader.onloadend = function () { |
|
|
|
// //$('#PhotoImg').attr('src', reader.result); |
|
|
|
// var postData = { |
|
|
|
// Base64Url: reader.result |
|
|
|
// } |
|
|
|
// this.HTTP_POST(config.webapi + "StuInfoFresh/savePhoto", postData, (data) => { |
|
|
|
// if (data) { |
|
|
|
// $('#Photo').val(data.AnnexesFileId); |
|
|
|
// $('#PhotoImg').attr('src', config.web + data.Url); |
|
|
|
// } else { |
|
|
|
// learun.layer.toast('采集照片信息失败！'); |
|
|
|
// } |
|
|
|
// }); |
|
|
|
// } |
|
|
|
// if (file) { |
|
|
|
// reader.readAsDataURL(file); |
|
|
|
// } |
|
|
|
// }, |
|
|
|
}, |
|
|
|
created() { |
|
|
|
console.log(this.value) |
|
|
|
this.imgList = JSON.parse(JSON.stringify(this.value.map(item => { |
|
|
|
return { |
|
|
|
id: item.F_Id, |
|
|
|
name: item.F_FileName, |
|
|
|
url: item.F_FilePath, |
|
|
|
type: item.F_FileType |
|
|
|
} |
|
|
|
}))) |
|
|
|
this.$nextTick(() => { |
|
|
|
this.isShow = true |
|
|
|
}) |
|
|
|
} |
|
|
|
}))) |
|
|
|
this.$nextTick(()=>{ |
|
|
|
this.isShow = true |
|
|
|
}) |
|
|
|
} |
|
|
|
}; |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
.file-name{ |
|
|
|
.file-name { |
|
|
|
position: absolute; |
|
|
|
bottom: 0; |
|
|
|
width: 100%; |
|
|
|
color: #606266; |
|
|
|
font-size: 13px; |
|
|
|
text-align: center; |
|
|
|
background-color: rgba(255,255,255,0.6); |
|
|
|
|
|
|
|
background-color: rgba(255, 255, 255, 0.6); |
|
|
|
|
|
|
|
text-overflow: ellipsis; |
|
|
|
overflow: hidden; |
|
|
|
white-space: nowrap; |
|
|
|
|
dyy
2 роки тому