el-upload手动上传和自动上传汇总

一、手动上传

:auto-upload="false" 设置为flase ,为手动上传；

手动上传的时候可以不再关注action，通过http-request实现自定义上传，当点击’上传‘按钮时会自动触发http-request；

当设置了 :auto-upload="false" 的时候， before-upload是不会被触发的，通常将方法写在 on-change 中做判断；

on-success回调函数也不会调用，这时我们需要用 on-change方法；
on-change：文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用

          <el-upload
            class="upload-demo"
            ref="upload"
            multiple
            accept=".xls"
            action="#"
            :http-request="httpRequest"
            :on-remove="handleRemove"
            :on-change="fileChange"
            :on-success="upFile"
            :file-list="dataList"
            :auto-upload="false"
            >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <div slot="tip" class="el-upload__tip" style="display: inline-block;margin-            
                left: 20px">只能上传xls格式的 excel文件</div>
          </el-upload>

          <el-button type="success" @click="submitUploadList">上传</el-button>

// param是自带参数。 this.$refs.upload.submit() 会自动调用 httpRequest方法.在里面取得file
httpRequest(param) {
  console.log(param)
  let fileObj = param.file // 相当于input里取得的files
  let fd = new FormData()// FormData 对象
  fd.append('file', fileObj)// 文件对象
 
  uploadPictures('common/uploadPictures', fd)
    .then(res => {
      if (res.code === 200) {
        this.$message.error('上传成功！');
      } else {
        this.$message.error(res.message);
      }
    })
    .catch(() => {
      this.$message.error('上传有误，请联系开发人员');
    })
}