With element-ui, el-upload to upload archive XXX.zip

For upload pictures archive XX.zip
problems met
1 == "How to request the first interface
Action =" http://192.18.38.10:8089/api/scfile/upload/file "/ HTTP address you upload /
when carrying token

Reference address https://www.cnblogs.com/zaijin-yang/p/11818628.html

Solve
<EL-the Upload: headers = "headers">
the Data () {
return {
uploadFileAddress: "", // HTTP address file access
taskId: "",
headers: {
// carry the token key: value of the shape key: It is a field value is the contents of
    the Authorization: window.localStorage.Authorization
},
}
},

##

Function before upload can not get the results after the request is successful, ha. note

The time-out timer device becomes 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>

Guess you like

Origin www.cnblogs.com/IwishIcould/p/12022049.html