关于对element-ui中el-upload组件及其参数的应用和文件上传方法

页面效果展示

文档导入功能

代码展示及对应的参数解释

1. ref="upload"：ref是Vue中的一个特殊属性，用于给元素或子组件注册引用信息。此代码场景中，通过this.$refs.upload可以访问到<el-upload>组件的实例。

2. :limit="1"：limit属性用于限制同时上传的文件数量。这里设置为1，意思就是同时只能上传1个文件。

3. accept=".xlsx,.xls"：accept属性用于指定允许上传的文件类型。这里设置为.xlsx、.xls，表示只允许上传Excel文件。

4. :headers="upload.headers"：headers属性用于设置上传文件时的HTTP请求头部信息（Headers）。HTTP请求头部包含了客户端向服务器发送的元数据。这里使用upload.headers来动态绑定请求头部。

5. :action：指定了文件上传的服务器地址。本项目代码中根据后端接口需用 upload.url 作为基础地址，并附加了查询参数 updateSupport，其值来自 upload.updateSupport。

6. :disbled：disabled 属性用于控制上传按钮是否可用。如果upload.isUploading 为 true，则上传按钮不可用，防止在上传过程中重复点击。

7. :on-progress：on-progress 事件监听器用于监听文件上传的进度。该项目代码中当文件上传进度发生变化时，会调用 handleFileUploadProgress 方法。

8. :on-success:  on-success 事件监听器用于监听文件上传成功的事件。该项目代码中当文件上传成功时，会调用 handleFileSuccess 方法。

9. :auto-upload:  auto-upload 属性用于控制是否在文件选择后自动上传。这里设置为 false，表示需要手动触发上传。

10. drag: drag 是一个布尔值属性，当设置为 true 时，启用拖拽上传功能。

<el-link>：这是 Element UI 提供的一个组件，用于生成一个带有链接样式的元素，通常用于导航链接或者操作链接。

:underline="false"：underline 属性用于控制链接是否显示下划线。这里设置为 false 表示链接不会显示下划线，使其看起来更像一个按钮。

<template>
...
<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的网络设备数据
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
...
</template>

      handleFileUploadProgress和handleFileSuccess是Element-ui的<el-upload>组件提供的事件处理函数，它们分别用于处理文件上传过程中的进度更新和上传成功后的回调。

1. handleFileUploadProgress：当文件正在上传时，这个事件会触发，并且会传递三个参数处理函数：event（浏览器的进度事件），file（当前正在上传的文件对象），fileList（所有文件的列表）。

2. handleFileSuccess：当文件上传成功时，这个事件会被触发，并且传递三个参数给处理函数：response（服务器返回的响应对象）,file（上传成功的文件对象），fileList（所有文件的列表）

export default {
 ...
data(){
  return {
   ...
    upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + authUtil.getToken() },
        // 上传的地址
        url: config.baseUrl + "/assetManager/networkEquipment/importData"
      },
    ...
 }
},
methods:{
...
   // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
...
}
}

upload的一些方法