157 lines
3.1 KiB
Vue
157 lines
3.1 KiB
Vue
<template>
|
|
<div class="fileUpload">
|
|
<div class="importBody">
|
|
<el-upload
|
|
class="upload"
|
|
:action="oss.host"
|
|
:data="upload_data"
|
|
:show-file-list="false"
|
|
:on-success="handleSuccess"
|
|
:before-upload="beforeUpload"
|
|
:on-error="handleError"
|
|
:drag="false"
|
|
multiple
|
|
>
|
|
<div class="el-upload-size">
|
|
<el-button type="primary" :size="size" icon="el-icon-Plus">上传附件</el-button>
|
|
</div>
|
|
</el-upload>
|
|
<div class="fileList">
|
|
<div class="fileItem" v-for="(item,index) in imageList" :key="index">
|
|
<fileType size="22px" :fileType="item.type" />
|
|
{{item.name}}
|
|
<span class="btnView" @click="deleteClick(index)"><el-icon size="14"><el-icon-Close/></el-icon></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import fileType from "@/views/docsManager/fileType"
|
|
export default {
|
|
name: "uploadListFile",
|
|
components:{
|
|
fileType
|
|
},
|
|
emits: ['closed', "uploadFileSuccess"],
|
|
props:{
|
|
list:{
|
|
type:Array,
|
|
},
|
|
length:{
|
|
type:Number,
|
|
}
|
|
},
|
|
watch:{
|
|
list:{
|
|
handler(val){
|
|
this.imageList = val;
|
|
},
|
|
deep:true,
|
|
immediate:true
|
|
}
|
|
},
|
|
data(){
|
|
return{
|
|
size:'small',
|
|
imageList:[],
|
|
oss:{
|
|
host:''
|
|
},
|
|
upload_data:{},
|
|
parentParams:{},
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods:{
|
|
// 导入文件
|
|
importFile(params){
|
|
this.parentParams = params;
|
|
},
|
|
// 上传前
|
|
beforeUpload(file){
|
|
return new Promise((resolve)=>{
|
|
setTimeout(async ()=>{
|
|
let params = {
|
|
dir:"serve/file/"
|
|
}
|
|
const res = await this.$API.oss.ossGet.post(params);
|
|
this.oss = res.data;
|
|
this.upload_data = {
|
|
name: new Date().getTime() + file.name,
|
|
key: this.oss.dir +file.name,
|
|
policy: this.oss.policy,
|
|
OSSAccessKeyId: this.oss.accessid,
|
|
success_action_status: "200",
|
|
callback: this.oss.callback,
|
|
signature: this.oss.signature,
|
|
"Cache-Control": this.oss.cache_control,
|
|
};
|
|
resolve()
|
|
},100)
|
|
})
|
|
},
|
|
// 上传成功
|
|
handleSuccess(file){
|
|
let fileName = file.data.filename.split('/')[1];
|
|
let fileType = fileName.split('.')[1];
|
|
let imageUrl = {
|
|
url:this.oss.host+'/'+file.data.filename,
|
|
name:fileName,
|
|
type:fileType
|
|
};
|
|
this.imageList.push(imageUrl);
|
|
this.$emit('uploadFileSuccess',this.imageList);
|
|
},
|
|
// 上传失败
|
|
handleError(){
|
|
this.$message.warning('上传失败请重新上传');
|
|
},
|
|
deleteClick(num){
|
|
this.imageList.forEach((item,index)=>{
|
|
if(index == num){
|
|
this.imageList.splice(index,1);
|
|
}
|
|
})
|
|
this.$emit('uploadFileSuccess',this.imageList);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.fileList{
|
|
margin-top: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
width: 800px;
|
|
.fileItem{
|
|
display: flex;
|
|
align-items: center;
|
|
margin:0 10px 8px 0;
|
|
background: #F6F6F6;
|
|
padding: 4px 30px 4px 10px;
|
|
border-radius: 4px;
|
|
color: #888888;
|
|
position: relative;
|
|
height: 35px;
|
|
.btnView{
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
z-index: 10;
|
|
padding: 4px;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
</style>
|