el-upload 上传文件的使用方式

时间：2024-01-20 19:23:25

需求

使用element ui中el-upload组件实现文件上传功能，主要分为两种：
 1. 通过action, url为服务器的地址
 2. 通过http-request（覆盖默认的上传行为，可以自定义上传的实现）, 注意此时 on-success 和 on-error事件无法使用

方法1： action （上传xls文件）

 <el-upload
    class="upload-demo"
    accept=".xls,.xlsx" 
    action="/dashboardSystem/manage/uploadFile" // 服务器地址
    :data="fileupload"  // 上传时附带的额外参数， 通常为{}， 比如 {date: '2023-05-05'}, 则，上传参数为{date: xx, file: Binary}
    :style="{ textAlign: 'left' }"
    ref="upload"
    :show-file-list="true"
    :before-upload="beforeUpload" // 判断文件类型和文件大小
    :on-exceed="handleExceed" // 上传文件个数限制
    :on-success="fileSuccess" // function(res, file, fileList)	上传成功，res为服务器返回的数据，可以判断是否解析成功
    :on-error="showError" // function(err, file, fileList) 上传失败
    :limit="1"
    >
      <el-button
        slot="trigger"
        :style="{ display: 'inlineBlock' }"
        size="small"
        type="primary"
        >选择文件
      </el-button>
   </el-upload>

方法2： 通过http-request自定义上传文件，没有on-success, on-error

 <el-upload
    :show-file-list="false"
    class="upload-demo"
    action="" // 必填
    :limit="1"
    accept=".csv"
    :http-request="uploadFile">
    <el-button size="small" type="primary">上传文件</el-button>
 </el-upload>

uploadFile(params){
  	 const file = params.file;
     // 使用FormData传参数和文件
     var form = new FormData();
     // 添加键值对
     form.append("file", file);
     form.append("date", this.urlId);
     // 传给后台FormData， 此时form = {date: xx, file: xxx(FormData)}
     this.uploadFileRequest("/xxx", form).then(resp=>{
       if(resp && resp.status == 200){
         this.$message("成功了");
       }
     })
   },
// 在api.js中编写上传方法，并导出
 const uploadFileRequest = (url, params) => {
  return axios({
    method: 'post',
    url: `${base}${url}`,  // base为axios中baseUrl
    data: params, // post请求，参数是放在data中传递的
    // 注意设置header
    headers: {
      'Content-Type': 'multipart/form-data'     
    }
  });
}

— 补充一个上传文件的

  handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw); // 转为url地址
    },

关于el-upload中before-upload钩子使用场景

el-upload 上传文件的使用方式_上传文件

  • 使用场景： 在上传文件之前判断相关参数是否符合校验，不符合则停止上传
  • 问题：使用普通的function返回true或者false， 返回false后仍然向后端上传文件（百度了一圈，发现官网中已有说明，—总是那么的简洁！！！！）
// 表单结构： uploadForm： {date：xxx, file: '待上传的文件'}， date日期必填
  beforeUpload(file) {
      return new Promise((resolve, reject) => {
        this.$refs.uploadForm.validate((valid) => {
          if (valid) {
            const isLt10M = file.size / 1024 / 1024 < 10
            if (!isLt10M) {
              this.$message.error('最大上传10M')
              return reject(false)
            } else {
              return resolve(true)
            }
          } else {
            return reject(false)
          }
        })
      })
    },

表单校验不通过，成功阻止上传！！！！

相关文章