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('上传有误，请联系开发人员');
    })
}
 
 
// 手动上传
submitUploadList() {
  this.$refs.upload.submit();
}
 
 
// fileList 是文件列表发生变化后，返回的修改后的列表对象，这里直接赋值就好啦！
fileChange(file, fileList) {
  if (file.status !== "ready") return;
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type ===         
    'image/jpg';
  if (!isJPG) {
    this.$message.error('上传图片只能是 PNG/JPG/JPEG 格式!');
    return false;
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
   this.$message.error('上传图片大小不能超过 2MB!');
   return false;
  }
  this.dataList = fileList
}

 二、自动上传（选中文件后，自动调用接口上传）

可以指定action=“上传到后端的url”，也可以指定http-request自定义上传行为。

http-request: 自定义上传

<el-upload
  class="edit-img"
  action="#"
  :show-file-list="false"
  :before-upload="beforeUpload"
   :http-request="handleRequest"
>
   <img v-if="imageUrl" :src="imageUrl" class="img-box" />
   <i v-else class="el-icon-plus uploader-icon"></i>
</el-upload>

beforeUpload(file) {
   const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
   if (!isJPG) {
      this.$message.error('上传图片只能是 PNG/JPG/JPEG 格式!');
      return false;
   }
   const isLt2M = file.size / 1024 / 1024 < 2;
   if (!isLt2M) {
      this.$message.error('上传图片大小不能超过 2MB!');
      return false;
   }
   return isJPG && isLt2M;
},
 
handleRequest(options) {
  const formData = new FormData();
  formData.append('file', options.file);
  uploadPictures('common/uploadPictures', formData).then(res => {
     if (res.code === 200) {
        this.imageUrl = res.data.picUrl;
     } else {
        this.$message.error(res.message);
     }
  }).catch(() => {
       this.$message.error('上传有误，请联系开发人员');
  })
}

<el-upload
  :action="后端url"
  :headers="headers" // 请求头
  :before-upload="beforeUpload"
  :on-exceed="handleExceed"
  :show-file-list="false"
   accept=".xls,.xlsx"
   :data="getParams" // 上传的参数
>
  <el-button type="text" icon="el-icon-upload">导入</el-button>
</el-upload>

三、实例：多次文件上传，一次请求接口上传，减轻服务器压力 

 

<el-upload
   class="upload-demo"
   ref="upload"
   accept=".png,.jpg"
   action="#"
   :limit="5"
   multiple
   :on-exceed="onExceed"
   :file-list="fileList"
   :on-change="handlChange"
   :auto-upload="false"
>
   <div style="display: flex; align-items: center">
      <el-button slot="trigger" size="small" plain>选取文件</el-button>
      <div slot="tip" class="el-upload__tip el-icon-warning-outline" style="margin-left:10px; color: #f56c6c"
      >
         只能上传.png,.jpg文件
      </div>
   </div>
</el-upload>
<el-button type="primary" @click.stop="submitUpload">上 传</el-button>

data() {
   return {
     fileList: [],   
   };
},
methods: {
    handlChange(file, fileList) {
      this.fileList = fileList;
    },
    // 上传文件超出报错
    onExceed(files, fileList) {
      this.$tool.message(`目前只支持上传5个文件， 请删除后再次选择！`, "error");
    },
    // 上传到后台
    async submitUpload() {
      if (this.$refs.upload.uploadFiles.length > 0) {
        const formData = new FormData();//  用FormData存放上传文件
        this.fileList.forEach((file) => {
          formData.append("files", file.raw);
        });
        //uploadBootLogo是上传接口
        await uploadBootLogo(formData).then((res) => {
          this.$tool.message("上传成功", "success");
          this.fileList = [];
        });
      } else {
        this.$tool.message("请上传资源文件", "error");
      }
    },
}

四、避坑 

（1）当删除文件时，该文件的raw为object，不是file。

（2）用户二次上传文件时，on-change中的形参filelist第二次上传的文件的raw为object，也不是file。 所以，在on-change，on-remove中，我们不能拿filelist直接赋值，而是要进行一个新数组的增删子项处理。

                        
原文链接：https://blog.csdn.net/weixin_44424820/article/details/144710418