|
uploadList.vue?
<template>
<div class="uploader-list">
<ul v-if="fileList.length>0">
<li v-for="file in fileList" :key="file.id">
<div class="fileItem">
<span>{{file.name.length>30?file.name.substring(0,30)+'...':file.name}}({{commonFun.getFileSize(file.size)}})-{{(file.status=='ready'&&Number(file.percentage)>0)?status.stop:status[file.status]}}
<span v-if="file.status=='uploading'||file.status=='ready'">({{Number(file.percentage).toFixed(1)}}%)</span>
</span>
<svg-icon icon-class="stop" @click="stopUpload(file)" v-if="file.status=='uploading'"/>
<i class="el-icon-caret-right" @click="startUpload(file)" v-if="file.status=='ready'||file.status=='stop'"></i>
<i class="el-icon-close" @click="delUpload(file)" style="color:#f56c6c"></i>
</div>
<el-progress style="width:440px;" :width="440" :percentage="file.percentage"><span>{{Number(file.percentage).toFixed(1)}}%</span></el-progress>
</li>
</ul>
</div>
</template>
<script>
import { toRefs,reactive,watchEffect,getCurrentInstance } from 'vue';
import { useI18n } from 'vue-i18n'//要在js中使用国际化
export default {
name: "uploadList",
props: {
fileList:Array,
},
emits:["stopUploadFile","uploadFileFun"],
setup(props,ctx) {
const { t } = useI18n();
const {proxy} = getCurrentInstance();
const commonFun = proxy.$fun;
const state = reactive({
files:[],
stopUpload(file){
ctx.emit('stopUploadFile',file,'stop')
},
startUpload(file){
ctx.emit('uploadFileFun',file)
},
delUpload(file){
ctx.emit('stopUploadFile',file,'del')
},
})
let status={
ready:t("personal.page_myspace_wait_upload"),
stop:t("common.constants_stopped"),
uploading:t("personal.page_myspace_uploading"),
success:t("common.constants_uploaded"),
}
watchEffect(()=>{
state.files = props.fileList
})
return{
...toRefs(state),
status,
commonFun
}
}
}
</script>
<style lang="scss">
.uploader-list {
position: relative;
}
.uploader-list > ul {
list-style: none;
margin: 0;
padding: 0;
padding-bottom: 20px;
li{
width: 490px;
margin: auto;
height: 50px;
border-bottom: 1px solid #cdcdcd;
background: #FFF;
.fileItem{
line-height: 30px;
font-size: 14px;
}
}
}
</style>
将上传列表单独创建一个uploadList.vue
上传组件
<!-- 上传文件 -->
<div class="file-panel" :class="showPercentage ? 'showPercentage' : 'hidePercentage'">
<el-card class="panelCard">
<template #header>
<div class="card-header">
<span>文件列表</span>
<div>
<i style="color:#409EFF" @click="showPercentageFun(false)" v-if="showPercentage" class="el-icon-minus" ></i>
<i style="color:#409EFF" @click="showPercentageFun(true)" v-else class="el-icon-full-screen"></i>
</div>
</div>
</template>
<upload-list v-if="showPercentage" @stopUploadFile="stopUploadFile" @uploadFileFun="uploadFileFun" :fileList="uploadFileList"></upload-list>
</el-card>
</div>
<el-dialog
:title="$t('common.constants_add_file')"
v-model="layout.upload"
width="600px"
custom-class="qrCodeDialog"
>
<el-upload
ref="upload"
style="text-align:center;"
class="upload-demo"
:action="UploadUrl()"
multiple
drag
:auto-upload="false"
name="modelfile"
:file-list="uploadFileList"
:show-file-list="false"
:data="{pfolderid:pfolderid.pfolderid}"
:on-change="fileChange"
:on-progress="fileProgress"
:on-success="uploadSuccess"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">{{$t("common.constants_drop_file")}}<em>{{$t("common.constants_click_file")}}</em></div>
</el-upload>
<ul v-if="uploadFileList1.length>0" class="el-upload-list el-upload-list--text">
<li v-for="item of uploadFileList1" :key="item.uid" class="el-upload-list__item is-ready" tabindex="0"><!--v-if-->
<a class="el-upload-list__item-name"><i class="el-icon-document"></i>{{item.name}}</a>
<label class="el-upload-list__item-status-label">
<i class="el-icon-upload-success el-icon-circle-check"></i>
</label><i class="el-icon-close"></i>
</li>
</ul>
<!-- <el-progress v-if="uploadPercentage>0" :percentage="uploadPercentage" color="#409eff" /> -->
<template #footer>
<span class="dialog-footer">
<el-button @click="layout.upload = false">{{$t("common.constants_close")}}</el-button>
<el-button type="primary" @click="uploadFileFun">{{$t("common.constants_begin_upload")}}</el-button>
</span>
</template>
</el-dialog>
具体方法
uploadSuccess (res) {
var flag=true;
var result="";
res.map(item => {
if(item.return=='0'){
flag=true;
}else{
flag=false;
result=item.return;
}
});
if(flag){
ElMessage.success(t("common.constants_file_success"));
}else{
ElMessage.warning(t(`common[${result}]`));
}
state.layout.upload=false;
stateFun.refresh();
},
// 文件上传
uploadFun(){
state.pfolderid.pfolderid=state.file.folderid;
uploadFileList1.value=[];
state.layout.upload=true;
},
fileProgress(event, file,fileList){
uploadFileList.value=fileList;
console.log(file)
},
// 停止上传
stopUploadFile(file,type){
if(type=='stop'){
upload.value.abort(file);
uploadFileList.value.findIndex(item =>{
if(item.uid==file.uid){
item.status="ready";
return true
}
})
}else{
var index = uploadFileList.value.findIndex(item =>{
if(item.uid==file.uid){
return true
}
})
uploadFileList.value.splice(index,1)
}
},
//
uploadFileFun(){
// if(file&&file.uid){
// uploadFileList.value.findIndex(item =>{
// if(item.uid==file.uid){
// item.status="ready";
// item.percentage=0;
// return true
// }
// })
// }else{
state.layout.upload=false;
// }
upload.value.submit();
},
UploadUrl() {
return "/api/"+store.state.site.version+"/file/uploadfromweb"
},
// 文件状态改变时的钩子
fileChange(file,fileList) {
uploadFileList1.value.push(file);
uploadFileList.value=fileList;
showPercentage.value=true;
},
showPercentageFun(val){
showPercentage.value=val;
},
|