【使用elementUI的el-upload实现上传文件的功能,上传文件不直接调接口,而是使用按钮提交】【文件上传接口的调用需要使用FormData()构造函数】

项目场景:

项目场景:点击按钮选择文件,然后再点击按钮上传文件(点击按钮的时候调用接口)。
解决方法:action属性是必传值,选择完文件之后自动上传。这里需要把acion属性填成 #
即:action=“#”


问题描述

使用element UI的 el-update 组件上传.xlsx文件。但是el-update默认是在选择文件的时候直接调用接口,我这边实际需求是,点击另外的按钮来向后台提交文件,调用接口。

组件源代码:

<el-upload
  class="upload-demo"
  drag
  action="https://jsonplaceholder.typicode.com/posts/"
  multiple>
  <i class="el-icon-upload">i>
  <div class="el-upload__text">将文件拖到此处,或<em>点击上传em>div>
  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kbdiv>
el-upload>

原因分析:

action属性是必传值,选择完文件之后自动上传。


解决方案:

action属性是必传值,选择完文件之后自动上传。这里需要把acion属性填成 #
即:action=“#”
auto-upload属性,是否在选取文件后立即进行上传,默认为true,改为false。
即::auto-upload=“false”
accept属性,指定文件类型。
on-change:因为不用action去上传文件,所以只能使用on-change来监听文件是否选择完成。on-success,on-error,on-progress,before-upload这些方法不能使用。
on-remove: 来监听删除文件事件。

修改之后的代码:

<el-upload
  ref="uploadDiv"
  class="upload-demo"
  drag
  action="#"
  accept=".xlsx"
  :auto-upload="false"
  :on-remove="handleRemove"
  :on-change="changeFile"
  >
  <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>

<el-button type="primary" @click="submit()">提交el-button>

js代码:提交file文件需要使用FormData()构造函数。
let formData = new FormData(); // 这是很重要的一步
formData.append(‘file’, this.file);

changeFile(val) {
      // console.log("选择文件成功");
      let nameArray = val.name.split(".");
      if(nameArray[nameArray.length - 1] === "xlsx") {
      // file保存选择的文件
        this.file = val.raw;
      } else {
        this.$message({
          message: '表格格式错误,请确认表格内容并重新上传',
          type: 'warning',
          duration: 2000
        });
      }
    },
submit() {
 // console.log("提交");
   let formData = new FormData();
   formData.append('file', this.file);
   // 添加其他非文件的参数,可以使用set() 方法
   // formData.set('config_type', this.json.config_typ);
   this.loading = true;
   // sysUpdateBasicConfig 这个是我封装的接口名,
   // 接口里面需要指定请求头 headers['Content-Type'] = 'multipart/form-data'
   sysUpdateBasicConfig(formData).then(res => {
   	
   })
 },

你可能感兴趣的:(elementUI,elementui,vue.js,javascript)