요소 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('<错误的提示>')
}