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

使用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"  // 表示不显示已上传文件的列表，默认不写为true
    class="upload-demo"
    action="" // 必填，action属性值为#,表示使用当前页面的URL作为上传的目标地址.action属性值为空字符串,表示需要手动指定上传的目标地址
    :limit="1"
    accept=".csv"  //表示只允许上传扩展名为.csv的文件
    :http-request="uploadFile">
    <el-button size="small" type="primary">上传文件</el-button>
 </el-upload>

uploadFile(params){
       const file = params.file;
     // 使用FormData传参数和文件, 是 JavaScript 中用于创建一个空的 FormData 对象的语句。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地址
    },

 --------介绍下：FormData对象

利用FormData对象可以将form表单元素的name与value进行组合,实现表单数据的序列化,从而介绍表单元素的拼接,提高工作效率

打印之后 发现 FormData 的结构本身是很简单的，在原型对象上也只有 append、foreach 、keys 等少数方法。

FormData 的主要方法
has => 返回一个布尔值表明 FormData 对象是否包含某些键
get => 返回在 FormData 对象中与给定键关联的第一个值
getAll => 返回一个包含 FormData 对象中与给定键关联的所有值的数组
append => 向FormData 中添加新的属性值，如果FormData 对应的属性值存在则覆盖原值，否则新增一项属性值。
set => 与 append() 的区别是，如果指定的键已经存在，set() 会使用新值覆盖已有的值，而 append() 会把新值添加到已有值集合的后面。
delete => 从FormData对象里面删除一个键值对
keys => 返回一个包含所有键的iterator对象
values => 返回一个包含所有值的iterator对象。
forEach => 遍历FormData 对象
entries => 返回一个包含所有键值对的iterator对象
FormData 存储数据方式
一对key / value 组成一条数据，key 是唯一的，一个 key 可以对应多个value，如果是使用表单初始化，那每一个表单字段对应一条数据，它们的HTML name 属性即为 key 值，它们的value属性即为对应的value值