ref : 绑定DOM元素

action：接口地址

data : 你要传入的参数

on-preview：点击文件列表中已上传的文件时的钩子

name：文件的参数名

on-remove :移除你上传的文件

on-error 失败运行的钩子函数

on-success 成功运行的钩子函数

multiple 是否上传多个文件

on-exceed 文件超出运行的钩子函数

before-upload 上传当中运行的钩子函数

auto-upload 手动还是自动上传

limit 上传的文件个数

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">

选取文件

@click="submitUpload" :class="helloTaskId!=''&&wordFlag==true?'subMitError':'subMitSuccess'"

>提交

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,"已上传的文件时的钩子");

}复制代码