1、data.js中定义

export default{
     init :function(){
          return{
                 fileList:[],
                 token:{
                    accessToken:''
                 }
           }
     }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

2、xxx.vue中

<template>
    <section>
        <el-row> 
             <el-form-item>
                  <el-upload 
                         class="upload-demo"  
                         action="http://192.168.400.56:9000/file/rest/common/uploadFilesClientByArray" 
                         :data='token'
                         :on-change="handleChange" 
                         :on-remove="handleRemove" 
                         :file-list="fileList">
                        <el-button size="small" type="primary">上传附件</el-button> 
                  </el-upload>  
                 </el-form-item> 
        </el-row>
    </section>
</template>
<script>
    import data from './data';
    import methods from './method';
    export default{
        data() {  
            return data.init(); 
        },
        methods:methods
    }
</script>
<style>
</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

注:1、接口接收accessToken的值放在请求头中,将上面的:data=”token” 改成:headers=”token”即可 
2、action即为附件的上传接口的详细地址 
3、data是传递参数的 
4、fileList是上传回调的数据数组

3、method.js中

export default{
    handleChange(file, fileList) {
        this.fileList = fileList; 
        var ids=handleUpOrDel(fileList);  
    },  
    handleRemove(file, fileList){
        this.fileList = fileList;  
        var ids=handleUpOrDel(fileList);
    },
    handleUpOrDel(fileList){
       let ids="";
       if(fileList){
            for(var i =0; i < fileList.length; i++){ 
                console.log(fileList[i].response);
                var obj = fileList[i].response; 
                if(obj){
                    if(obj.code){
                         ids +=obj.record.successResponse[0].id;
                         if(i < fileList.length - 1){
                            ids +=",";
                         }
                    }
                }
            } 
        }
        return ids;  
    }
}
Logo

前往低代码交流专区

更多推荐