借助element-ui，el-upload实现上传压缩包XXX.zip

对于上传图片压缩包XX.zip
遇见的问题
1==》如何在请求第一个接口
action="http://192.18.38.10:8089/api/scfile/upload/file" /你上传的http地址/
时携带token

参考地址 https://www.cnblogs.com/zaijin-yang/p/11818628.html

解决
<el-upload :headers="headers">
data(){
return{
uploadFileAddress:"",//文件访问的http地址
taskId:"",
headers: {
//携带的token key:value的形似 key:是字段 value是内容
　　　　Authorization:window.localStorage.Authorization
},
}
},

##

上传之前的函数 是拿不到请求成功后的结果的哈。注意

将超时器变为定时器 ps

getmanayImgUploadSpeedApi(){
           let params={
                taskId:this.taskId  
            }
            this.$api.getmanayImgUploadSpeed(params).then(res=>{
                let _this=this;
                console.log("进度",res)
                if(res.data.over==false){
                    setTimeout(()=>{
                        _this.getmanayImgUploadSpeedApi();
                    },2000)
                }else{
                
                }
            })
        }

  <div class="important-in-box">
            <el-upload
            :headers="headers"
            class="upload-demo"
            drag
             :before-upload="studentUploadFileBefore"
           　:on-success="studentUploadFileSuccess"
             action="http://192.18.38.10:8089/api/scfile/upload/file" /*你上传的http地址*/
            multiple>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">导入学生照片<em>点击上传</em></div>
            </el-upload>
        </div>

js

<script>
    export default {
        data(){
            return{
                uploadFileAddress:"",//文件访问的http地址
                taskId:"",
                headers: {//携带的token 
            　　　　Authorization:window.localStorage.Authorization
                },
            }
        },
        methods:{
            //图片上传之前 要做的事件，此时还没有上传，这个函数通做一些限制，或者做一写处理。
            studentUploadFileBefore(res, file) {           
            
    
            },
            //上传成功后，返回来的数据。 
            studentUploadFileSuccess(res, file){
                 if(res.success==true){
                     console.log(res)
                     this.uploadFileAddress=res.data.fileUrl;  //拿到图片上传的地址
                     this.postManyImportantPhotoImgApi();//  调用另外一个请求
                 }
            },
             
            //这是第二个请求
            postManyImportantPhotoImgApi(){
                let params={
                    fileUrl:this.uploadFileAddress,
                    orgId:localStorage.getItem("orgId"), 
                    personType:"10"
                }
                this.$api.postManyImportantPhotoImg(params).then(res=>{
                    console.log("批量导入人员照片 需要拿到taskId",res)
                    if(res.success==true){
                        this.taskId=res.data.taskId;
                        this.getmanayImgUploadSpeedApi();
                    }
                })
            },
          
            //这是第三个请求
            getmanayImgUploadSpeedApi(){
               let params={
                    taskId:this.taskId  
                }
                this.$api.getmanayImgUploadSpeed(params).then(res=>{
                    let _this=this;
                    console.log("进度",res)
                    if(res.data.over==false){
                        setTimeout(()=>{
                            _this.getmanayImgUploadSpeedApi();
                        },2000)
                    }else{
                       //
                    }
                })
            }
        }
    }
</script>

借助element-ui，el-upload实现上传压缩包XXX.zip

原文：https://www.cnblogs.com/IwishIcould/p/12022049.html