vue ivew文件上传案例1

1。代码组件，

<Modal
        v-model="showUpload"
        title="上传文件"
        @on-ok="modalOk" //确认方法
        @on-cancel="modalCancel"> //取消方法
    <Upload
            ref="upload"
            :on-success="handleSuccess" //上传成功之后的方法
            :max-size="2048" //限制上传的大小
            :on-format-error="handleFormatError"//上传错误回调
            :on-exceeded-size="handleMaxSize" //上传大小出现错误回调
            :before-upload="handleBeforeUpload" //在什么之后上传
            multiple //是否支持多选
            action="/base-data/tbasecustomer/img">//上传请求路径
        <i-button type="ghost" icon="ios-cloud-upload-outline">开始上传</i-button>
    </Upload>
</Modal>

2.在vue组件中的方法

modal 的显示和隐藏  在data里面添加

showUpload ：true

在方法method里面添加

modalOk(){//确认方法
    this.showUpload=false;
},
modalCancel(){
//取消方法
},

 

handleSuccess (res, file) {//上传成功之后的方法
    console.log(res)
    console.log(file)
    if (res.code == "100100") {
        let fileDetails = res.data;
        if(!vm.customer.sysFile.fileDetails){
            vm.customer.sysFile = {
                fileId:"",
                fileType:"",
                fileDetails:[]
            }
        }
        vm.customer.sysFile.fileDetails.push(fileDetails);
    } else {
        layer.alert("上传失败");
    }
},

handleFormatError (file) {//上传错误回调
    this.$Notice.warning({
        title: 'The file format is incorrect',
        desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
    });
},

handleMaxSize (file) { //上传大小出现错误回调
    this.$Notice.warning({
        title: 'Exceeding file size limit',
        desc: 'File  ' + file.name + ' is too large, no more than 2M.'
    });
},

handleBeforeUpload () {

}