element UI el-upload上传组件使用

项目场景：

最近在项目中遇到了需要上传文件的地方，第一次用，此处作为学习的记录，有不足望指正

---

描述：

el-upload的方法名和属性请参照element官方文档，这里只贴我使用的一些

我使用的样式是可拖拽上传

代码如下：

<el-upload
  ref="myUpload"                                     上传文件的名字
  name="file"
  class="upload-demo"
  drag                                               允许拖拽（不写默认false）
  action="/XXXXXXX"                                  上传的地址
  accept=".xls,.XLS,.xlsx,.XLSX,.csv,.CSV"           允许上传的文件格式，可以自定义
  multiple="false"                                   是否支持多选文件
  limit="1"                                          允许上传的文件个数（此处可结合上一个属性）
  :auto-upload="false"                               是否自动上传（此处为了效果选择false）
  :on-exceed="handleExceed"                          文件超出个数限制时的钩子（可在此设置提示）
  :on-success="handleSuccess"                        文件上传成功时的钩子
  :on-error="handleError"                            文件上传失败时的钩子
  :data="ruleForm"                                   上传时附带的额外参数
 >
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip">只能上传xls，xlsx，csv文件</div>
</el-upload>

---

要注意的是文件上传的方式是表单上传，所以参数的格式不是JSON，而是multipart/form-data

---

下面是我用到的一些钩子函数

//文件超出限制时
handleExceed() {
    
    
   this.$message.warning('当前只允许选择 1 个文件！')
},

// 移除文件
clearFiles() {
    
    
   this.$refs['myUpload'].clearFiles()
},

// 弹窗中的新增
employee() {
    
    
    this.$refs['myUpload'].submit()
},

// 文件上传成功时
handleSuccess(res) {
    
    
  this.$message.success('上传成功！')
  // 可以写一些其他操作，例如刷新页面
},

// 文件上传失败时
handleError(res) {
    
    
  this.$message.error('<错误的提示>')
}