使用饿了么组件el-upload实现手动导入文件

el-upload实现手动上传

代码片段：

//代码导入按钮
<el-button type="primary"  @click="daoRu">导入</el-button> 
//upload弹框
<el-dialog
 v-dialogDrag //允许拖拽，自己封装的指令
  title="导入运单"
  :visible.sync="expressVisible"
  width="32%"
  height="300"
  :modal-append-to-body="false"
  :close-on-click-modal="false">
      <el-upload
          class="uploadFile"
          ref="uploads"        
          :auto-upload="false" //自动上传设置为false
          :limit="1" //限制只能上传一张
          accept=".xlsx" //限制上传格式
          :action="''"  //必须设置的action属性
          :before-upload="beforeUploadFile"                  
          :file-list="fileList"   
          :on-change="fileChange"  
          :on-remove="handleRemove" 
          :http-request="uploadFiles" //手动上传重要属性 http-request
          :on-exceed="handleExceed"      
          drag
          width="100%"
          height="100%">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
          </div>
          <div class="el-upload__tip" slot="tip">只能上传xlsx文件</div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
          <el-button
          size="small"
          plain
          type="primary"
          style="float:left;padding:0px;height:30px;width:80px">
          <a
              style="text-decoration:none;color:#409EFF;display:block;line-height:1;width:100%;"
              href="static/3PL模式用-麦哲伦默认批量下单模板(印尼）.xlsx"
          >下载模板</a> //a标签是实现文件模板下载
          </el-button>
          <el-button size="small" type="primary" @click.native="fileSubmit">确 定</el-button>
          <el-button size="small" @click="close">取 消</el-button>
      </span>                
  </el-dialog>
//data的定义
expressVisible:false,//导入弹框 
fileList: [], //excel文件列表

文件上传组件方法的定义

//upload的组件方法的定义
// 文件状态改变时的钩子
fileChange(file, fileList) {
 this.$refs.uploads.clearFiles();//form表单的清空操作
 this.fileList.push(file);
 },
handleRemove(file) {
// 实现缩略图模板时删除文件
 let index = this.fileList.findIndex(fileItem => {
     return fileItem.uid === file.uid;
 });
 this.fileList.splice(index, 1);
 }, 
 // 上传文件个数超过定义的数量
handleExceed(files, fileList) {
    this.$message.warning(`当前限制选择 1 个文件，请删除后继续上传`);
},
//手动上传
uploadFiles(param) {//注意这里是uploadFiles(param),file文件的二进制流转换
            let data = new FormData();//参数格式的转换，data为接口必选参数
            let userTspId = JSON.parse(localStorage.getItem("userInfo")).datas.data
                .tspId;
            let userLogcode = JSON.parse(localStorage.getItem("userInfo")).datas.data
                .userLogcode;
            let userTspName = JSON.parse(localStorage.getItem("userInfo")).datas.data
                .tspName;
            let accountCode = JSON.parse(localStorage.getItem('userInfo')).datas.data
                .accountCode;
            let accountName = JSON.parse(localStorage.getItem('userInfo')).datas.data
                .accountName;
            data.append("file", param.file);//文件流以参数形式传给后台
            data.append("userTspId", userTspId);
            data.append("userLogcode", userLogcode);
            data.append("userTspName", userTspName);
            data.append("accountCode", accountCode);
            data.append("accountName", accountName);
            this.$http({
                method: "post",
                headers: "multipart/form-data",
                url:'/api' + this.$api.haiyunchukou.yibanshuju.importExcelByYunDan,
                // Authorization: this.token,
                data: data,
                success: res => {  
                this.expressVisible = false;                   
                let data = JSON.parse(res.data);
                this.fieldsList = data.fieldsList;
                this.body_data = data.body_data;
                this.$message({
                    type:'success',
                    message:'导入成功!'
                })
                if(this.platformType == 'TSP'){
                    this.showShippment();               
                }else{
                    this.tspShowShippment();               
                }
                },            
            });
            },    
//弹出框文件的确定按钮，以及弹出框的文件取消上传的按钮
fileSubmit() {
     this.$refs.uploads.submit();                
},
//excel弹框导入取消
close() {
this.fileList.splice(0);
this.$message.info("已取消上传");
this.expressVisible = false;
},