ref : 绑定DOM元素
action:接口地址
data : 你要传入的参数
on-preview:点击文件列表中已上传的文件时的钩子
name:文件的参数名
on-remove :移除你上传的文件
on-error 失败运行的钩子函数
on-success 成功运行的钩子函数
multiple 是否上传多个文件
on-exceed 文件超出运行的钩子函数
before-upload 上传当中运行的钩子函数
auto-upload 手动还是自动上传
limit 上传的文件个数
<el-upload
class="upload-demo"
ref="classZip"
action="action"
:data="{taskId:helloTaskId}"
:on-preview="handlePreview"
name="classZip"
:on-remove="handleRemove"
:on-error="handleError"
:on-success="handleSuccess"
multiple
:on-exceed="handleExceed"
:before-upload="beforeAvatarUpload"
:limit="1"
:on-change="handleChange"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary" >选取文件</el-button>
<div slot="tip" class="el-upload__tip" style="color: red;">{{message}}</div>
</el-upload>
<button class="helloSubmitBtn"
@click="submitUpload" :class="helloTaskId!=''&&wordFlag==true?'subMitError':'subMitSuccess'"
>提交</button>
export default {
name: 'HelloWorld',
data () {
return {
sunmitShow:false,
helloTaskId:'',
imgFlag: false,
message:'',
Wordmessage:'', //输入不能为空提示
fileNmae:'',
wordFlag:false
}
},
methods:{
handleChange(){
this.wordFlag=true;
},
handleExceed(files,fileList){
// console.log(files,fileList,"文件超出个数限制时的钩子");
this.message="只允许上传一个文件";
},
upload(){
},
beforeAvatarUpload(file){
var FileExt = file.name.replace(/.+\./, "");
if (['zip', 'rar','gz',".apk"].indexOf(FileExt.toLowerCase()) === -1){
this.message="文件格式有误,请重新上传"
return false;
}
this.message="上传中,请稍等"
},
handleError(err, file, fileList){
// console.log(err, file, fileList,"失败")
this.message="上传失败";
},
handleSuccess(response, file, fileList){
//console.log(response, file, fileList,"成功")
this.message="上传成功";
setTimeout(()=>{
this.$router.push({
path:"/homePage",
query:{
id:1
}
})
},1000)
},
helloSunmitBtn(){
},
submitUpload() {
// console.log(this.$refs.classZip)
if(!this.wordFlag){
this.message="请上传文件";
return
}
if(this.helloTaskId==""){
this.Wordmessage="请填写任务ID";
return
}else{
this.Wordmessage=""
this.$refs.classZip.submit();
}
},
handleRemove(file, fileList) {
// console.log(file, fileList,"删除");
},
handlePreview(file) {
// console.log(file,"已上传的文件时的钩子");
}