<template>
<div class="box>
<el-upload
class="upload-demo"
ref="upload"
action="121"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-change="getFile"
:file-list="imgArr"
:http-request="upLoad"
:auto-upload="false"
:before-upload="beforeUpload">
<el-button slot="trigger" size="mini" type="primary">选取文件</el-button>
<div slot="tip" class="el-upload__tip">请上传pdf/word等文件,不超过500kb</div>
</el-upload>
</div>
</template>
<script>
import { uploadContract } from '@/api/uploadImg' //后端接口
export default {
data() {
return {
imgArr: []
}
},
methods: {
handlePreview(file) {
console.log('handlePreview',file)
},
handleRemove(file, fileList) {
const index = this.imgArr.indexOf(file)
if (index > -1) {
this.imgArr.splice(index, 1)
}
},
getFile(file, fileList, i){
let fd = new FormData();
fd.append('file',file.raw)
uploadContract(fd).then(res =>{
if(res.code == 10000){
this.imgArr.push({
name: res.data.name,
url: res.data.url
})
}else {
this.$message.error(res.msg)
}
}).catch(err =>{
this.$message.error(err)
})
},
beforeUpload(file){ //可以再这判断文件格式等;
console.log('beforeUpload',beforeUpload)
},
upLoad(file) {
console.log('upLoad.file',file)
},
}
}
</script>
vue Upload 上传多文档
最新推荐文章于 2024-04-17 11:32:18 发布