在vue-cli中使用iview组件上传多个文件的功能
思路：创建一个数组 把需要上传的文件 push到这个数组里面
需求：
点击提交按钮把上传后得文件URL地址当做参数传给后台；多个文件使用逗号隔开
样式随便写的，自己做的demo
html代码
<template>
<div>
<Upload
ref="upload"
multiple //支持多选文件
name="files" //上传接口的参数
:before-upload="handleUpload" //上传之前调用
:on-success="uploadSuccess" //上传成功调用
:on-error="uploadError" //上传失败调用
:format="['docx','doc','txt', 'pdf']" 文件上传的格式
:on-format-error="handleFormatError" //文件格式错误调用
action="http://192.10.78.68:8060/FH_AM6/api/fileUpload/upload" //上传的接口地址
>
<Button icon="ios-cloud-upload-outline">上传</Button>
</Upload>
<Button type="primary" @click="issues" class="issues">提交</Button>
</div>
</template>js代码
<script>
export default {
name: "ces",
data(){
return{
uploadList: [],
attachments:"" //附件
}
},
created() {
},
//监听attachments对象的值，有新值添加进一个数组
watch: {
attachments:function(val,oldval){
if(val){
this.uploadList.push(val)
// console.log(this.uploadList)
}
}
},
methods:{
//上传成功调用
uploadSuccess(response){
this.attachments = response
},
//上传失败调用
uploadError(error){
this.$Message.info(error);
},
//文件格式错误调用
handleFormatError(){
this.$Message.info("文件格式不正确,请上传excel格式文件");
},
//点击提交传参
issues() {
if (this.uploadList.length == 1){
this.attachments = this.uploadList[0].url
console.log(this.attachments)
}else if(this.uploadList.length > 1){
const urlList = []
for(let j = 0;j<this.uploadList.length;j++){
urlList.push(this.uploadList[j].url)
// console.log(urlList)
}
this.attachments = urlList.join(",")
// console.log(this.attachments)
}
else {
this.$ajax.post('http://192.10.78.68:8060/FH_AM6/api/manuscript/saveManuscript',
this.$qs.stringify({
FILE_PATHS:this.attachments, //附件
})
).then((res)=>{
if(res.status==200){
this.$router.push('/contributefinish')
}
}).catch(()=>{
this.$Message.error('获取失败');
})
}
},
}
}
</script>整体代码
<template>
<div>
<Upload
ref="upload"
multiple
name="files"
:before-upload="handleUpload"
:on-success="uploadSuccess"
:on-error="uploadError"
:format="['docx','doc','txt', 'pdf']"
:on-format-error="handleFormatError"
action="http://192.10.78.68:8060/FH_AM6/api/fileUpload/upload"
>
<Button icon="ios-cloud-upload-outline">上传</Button>
</Upload>
<Button type="primary" @click="issues" class="issues">提交</Button>
</div>
</template>
<script>
export default {
name: "ces",
data(){
return{
uploadList: [],
attachments:"" //附件
}
},
created() {
},
//监听attachments对象的值，有新值添加进一个数组
watch: {
attachments:function(val,oldval){
if(val){
this.uploadList.push(val)
// console.log(this.uploadList)
}
}
},
methods:{
//上传成功调用
uploadSuccess(response){
this.attachments = response
},
//上传失败调用
uploadError(error){
this.$Message.info(error);
},
//文件格式错误调用
handleFormatError(){
this.$Message.info("文件格式不正确,请上传excel格式文件");
},
//点击提交传参
issues() {
if (this.uploadList.length == 1){
this.attachments = this.uploadList[0].url
console.log(this.attachments)
}else if(this.uploadList.length > 1){
const urlList = []
for(let j = 0;j<this.uploadList.length;j++){
urlList.push(this.uploadList[j].url)
// console.log(urlList)
}
this.attachments = urlList.join(",")
// console.log(this.attachments)
}
else {
this.$ajax.post('http://192.10.78.68:8060/FH_AM6/api/manuscript/saveManuscript',
this.$qs.stringify({
FILE_PATHS:this.attachments, //附件
})
).then((res)=>{
if(res.status==200){
this.$router.push('/contributefinish')
}
}).catch(()=>{
this.$Message.error('获取失败');
})
}
},
}
}
</script>
<style scoped>
.issues{
float: right;
}
</style>以上是本章的全部内容