iview 上传文件手动分部上传-CSDN博客

template:

        <Upload class="upload-container"
            ref="upload"
            type="drag"
            :on-success="uploadSucess"
            :before-upload="uploadBefore"
            :on-error="uploadError"
            :on-progress="uploadPro"
            :show-upload-list="false"
            :data="{'env':this.targetEnv}"
            action="http://172.19.192.26:8084/api/envSync/envDiff/uploadEnvVersion">
            <div style="padding: 20px 0;">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>导入目标文件</p>
            </div>
        </Upload>
        <Button class="upload-todo" type="success" @click="upload">上传</Button>
复制代码

js:

uploadBefore（上传之前钩子可以获取到文件属性）返回值为false或promise时就能阻断上传

按钮点击上传通过绑定ref去控制上传

export default {
        data(){
            return {
                files:null,//上传的文件
                fileName:'',
            }
        },
        methods:{
            uploadSucess(response) {//上传成功钩子
                if(response.msg == '上传成功') {
                    this.$Message.success('导入成功')
                }else {
                    this.$Message.error(response.msg)
                }
                this.files=null
                this.fileName = ''
            },
            uploadError() {//失败
                this.$Message.error('导入失败')
            },
            uploadBefore(file) {//上传前钩子
                this.files=file
                this.fileName = file.name
                return false
                // return new Promise((resolve,reject) => {
                //     this.$Modal.confirm({
                //         title:'确认窗口',
                //         content:`<p>目标环境：${this.targetEnv}</p><p>文件名：${file.name}</p>`,
                //         onOk:() => {
                //             resolve()
                //         },
                //         onCancel:() => {
                //             reject()
                //         }
                //     })
                // })
            },
            upload() {//点击按钮上传
                if(this.files == null) {
                    this.$Message.error('请导入文件！')
                    return
                }
                this.$Modal.confirm({
                    title:'确认窗口',
                    content:`<p>文件名：${this.fileName}</p>`,
                    onOk:() => {
                        this.$refs.upload.post(this.files);
                    },
                    onCancel:() => {
                    }
                    
                })
            },
        }
    }
复制代码