【vue2+elementui】记录el-upload文件上传时调接口传参的几种情况

自动上传

el-upload上传文件调接口的时候默认会带有一个入参file: 原生的file对象

无额外入参

action属性指定了文件上传的接口地址
auto-upload属性：是否在选取文件后立即上传，默认值true
所以只要设置了这两属性，文件在选择后（或拖拽到上传区域后）会自动上传到 action 属性指定的地址，默认入参是file。

<div class="batch-import-contain">
  <el-button type="primary" size="mini">下载模板</el-button>
  <el-upload
    class="upload-demo"
    drag
    action="https://jsonplaceholder.typicode.com/posts/"
    :auto-upload="true"
    :accept="accept"
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">
      <p>点击或将文件拖拽到这里上传</p>
      <p>支持扩展名：.xls .xlsx .csv .et .ett .xlt...</p>
    </div>
  </el-upload>
</div>

export default {
  name: 'batchImport',
  data() {
    return {
      accept: '.xls,.xlsx,.csv,.et,.ett,.xlt,.png',
    }
  },
}

有额外入参

但如果还有额外的入参，就要用到http-request属性：覆盖默认的上传行为，可以自定义上传的实现
action的值可以设置为#或其他占位符，因为实际请求会在http-request中处理

<div class="batch-import-contain">
  <el-button type="primary" size="mini">下载模板</el-button>
  <el-upload
    class="upload-demo"
    drag
    action="#"
    :accept="accept"
    :auto-upload="true"
    :http-request="customUpload"
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">
      <p>点击或将文件拖拽到这里上传</p>
      <p>支持扩展名：.xls .xlsx .csv .et .ett .xlt...</p>
    </div>
  </el-upload>
</div>

export default {
  name: 'batchImport',
  data() {
    return {
      accept: '.xls,.xlsx,.csv,.et,.ett,.xlt,.png',
      extraParams: {
	    userId: 123,  
        token: 'your_token_here' 
	  },
    }
  },
  methods: {
	customUpload(params) {
	  // params是一个对象，包含了file和fileList，
	  // 但是这个params参数可能每个版本不一样值就不一样，到时候自己打印看看，
	  // 反正file的值就是原始的File对象
	  const formData = new FormData()
      formData.append('file', params.file)	// 这是file入参，文件信息

	  // 如果extraParams是个对象，循环加入formData
	  for (const key in this.extraParams) {  
        formData.append(key, this.extraParams[key]) 
      } 
  		
  	  // 如果extraParams是个单独的值，直接加入
      formData.append('extraParams', 'someValue')	// 这是额外的入参，假设叫extraParams

	  // 调接口
	  接口地址(入参：formData).then(res => {
	  	// 上传成功
	  }).catch(() => {
	    // 上传失败
	  })
	},
  },
}

手动上传

上面是选择文件后就自动调接口上传到服务器了，还有一种情况是：选择文件后，点击确定按钮或者其他什么操作才触发文件上传至服务器

无额外入参

auto-upload属性设置为false
action属性写明接口地址
在按钮点击事件中调用upload组件的submit方法手动触发上传

<div class="batch-import-contain">
  <el-button type="primary" size="mini">下载模板</el-button>
  <el-upload
    class="upload-demo"
    ref="upload"
    drag
    action="https://jsonplaceholder.typicode.com/posts/"
    :auto-upload="false"
    :accept="accept"
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">
      <p>点击或将文件拖拽到这里上传</p>
      <p>支持扩展名：.xls .xlsx .csv .et .ett .xlt...</p>
    </div>
  </el-upload>
</div>
<span class="footer">
  <el-button type="primary" @click="handleSure" size="mini">确定</el-button>
</span>

export default {
  name: 'batchImport',
  data() {
    return {
      accept: '.xls,.xlsx,.csv,.et,.ett,.xlt,.png',
    }
  },
  methods: {
	handleSure() {
	  this.$ref.upload.submit()		// 写完这个就会触发上传调接口了
	}	
  }
}

有额外入参

<div class="batch-import-contain">
  <el-button type="primary" size="mini">下载模板</el-button>
  <el-upload
    class="upload-demo"
    ref="upload"
    drag
    action="https://jsonplaceholder.typicode.com/posts/"
    :auto-upload="false"
    :accept="accept"
    :file-list="fileList" 
    :on-change="onchange"
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">
      <p>点击或将文件拖拽到这里上传</p>
      <p>支持扩展名：.xls .xlsx .csv .et .ett .xlt...</p>
    </div>
  </el-upload>
</div>
<span class="footer">
  <el-button type="primary" @click="handleSure" size="mini">确定</el-button>
</span>

export default {
  name: 'batchImport',
  data() {
    return {
      accept: '.xls,.xlsx,.csv,.et,.ett,.xlt,.png',
      fileList: [],
      extraParams: {
	    userId: 123,  
        token: 'your_token_here' 
	  },
    }
  },
  methods: {
  	onchange(file, fileList) {
	  this.fileList = fileList
	},
	handleSure() {
	  if(!this.fileList.length) {
		// 没有文件的时候要提示下"请先上传文件"
		return 
	  }
	  
	  const formData = new FormData()
	  // 因为按钮点击事件的参数没有file信息，所以入参file要从on-change事件得到的fileList里面取
	  // 又因为要考虑有几个文件，万一是多选就有多个，入参写法就不一样
	  this.fileList.forEach(item => {
		formData.append("file[]", file.raw)
		// 注意：某些版本的 Element UI 可能不直接提供 file.raw，可能需要调整  
        // 如果不是 file.raw，则可能需要通过其他方式获取到原始的 File 对象 
	  })
		
	  // 如果单个文件，就直接formData.append("file[]", this.fileList.raw)

	  // 额外入参
	  for (const key in this.extraParams) {  
        formData.append(key, this.extraParams[key]) 
      } 
      // 或者单个入参  formData.append("入参名", "入参值") 
	 
	  // 调接口开始上传
	  接口地址(入参: formData).then(res => {
		// 上传成功
	  }).catch(() => {
		// 上传失败
	  })
	},
  }
}