<template>
<div>
<el-upload
style="margin-top: 10px;"
class="upload-demo"
list-type="picture-card"
action="http://192.168.1.115:9999/sdfs/file/uploadFile"
:on-remove="handleRemoveF"
:on-success="handleSuccessF"
:before-upload="handleBefore"
:file-list="fileList">
附件上传
<div slot="tip" class="el-upload__tip">文件大小不超过{{size}}MB</div>
<div slot="file" slot-scope="{file}">
<div style="width: 146px;height: 146px;display: flex;justify-content: center;align-items: center;
padding: 3px;">
<span>{{ file.name }}</span>
</div>
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handleDown(file)">
<i class="el-icon-download"></i>
</span>
<span class="el-upload-list__item-delete" @click="handleRemoveF(file)">
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
</div>
</template>
<script>
import util from '@/libs/util'
export default {
name: "UploadFile",
props: {
fileList:{
type: Array,
default: () => {
return []
}
},
size:{
type: Number,
default: () => {
return 1
}
}
},
watch:{
},
data() {
return {
uploadUrl: util.baseUrl + '/sdfs/file/uploadFile',
file:''
}
},
methods: {
handleRemoveF(file, fileList) {
for(let i in this.fileList){
if(file.data.filePath==this.fileList[i].data.filePath){
this.fileList.splice(i,1)
}
}
},
handleDown(file) {
window.open(util.baseUrl + '/sdfs/file/download?filePath=' + file.data.filePath)
},
handleBefore(file){
const isLt2M = file.size / 1024 / 1024 < this.size;
if (!isLt2M) {
this.$Message.error('上传文件大小不能超过'+ this.size +'MB!')
}
return isLt2M;
},
handleSuccessF(res, file) {
res.name = file.name
this.fileList.push(res)
}
}
}
</script>
<style scoped>
</style>
标签：文件,return,filePath,fileList,util,file,图片,上传,size From： https://www.cnblogs.com/Byme/p/16985196.html