<template>
<div>
<div class="selectfile">选择文件</div>
<input type="file" accept=".doc,.docx,application/msword,.pdf,image/*,xls,xlsx"
name="file" ref="file" @change="uploadFiles" value="" multiple="multiple" class="set-opcity" />
<button type="button" @click="handleUpload">上传</button>
<div v-if="fileList.length>0" class="file-list">
<div v-for="(item,index) in fileList" :key="index"><span class="filename">{{item.name}}</span><span
@click="del(item,index)">删除</span></div>
</div>
<br>
<br>
<br>
<br>
<a href="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" download="vue.js" target="_blank">文件查看</a>
<br>
<br>
</div>
</template>
<script>
export default {
name: "Upload",
data() {
return {
fileList: []
}
},
methods: {
uploadFiles(value) {
console.log(value)
console.log(this.$refs.file.files)
this.fileList = [...this.fileList, ...this.$refs.file.files]
console.log(this.fileList)
},
handleUpload() {
if (this.fileList.length !== 0) {
this.fileList.forEach(item => {
this.upload(item)
})
} else {
alert("请选择文件")
}
},
upload(file) {
var formData = new FormData();
formData.append("file", file)
// 调用接口
},
// 删除附件
del(fileInfo, index) {
console.log(fileInfo)
console.log(index)
this.fileList.splice(index, 1)
}
}
}
</script>
<style scoped="scoped">
.selectfile {
position: absolute;
z-index: -1;
color: green;
padding: 4px 8px;
border: 1px solid #008000;
border-radius: 8px;
}
.set-opcity {
opacity: 0;
}
.file-list>div{
/* line-height: 28px; */
list-style: none;
display: flex;
justify-content: space-between;
margin-top: 18px;
padding: 0px 10px;
}
.filename{
80%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
效果
