在element-ui中使用el-upload自定义上传文件

2023-12-15 02:43:13

element-ui中el-upload组件的自定义上传

组件配置

要使用el-upload组件进行自定义上传，需要先在组件中设置action属性。action属性指定了上传文件的URL地址。另外，还需要设置name属性，name属性指定了上传文件表单域的名称。

<el-upload
  action="http://localhost:8080/upload"
  name="file"
>
  <el-button>上传文件</el-button>
</el-upload>

处理上传请求

当用户点击上传按钮后，el-upload组件会触发一个名为“change”的事件。此时，可以使用该事件来处理上传请求。

const upload = document.querySelector('.el-upload');
upload.addEventListener('change', (e) => {
  const files = e.target.files;
  // 在这里处理上传请求
});

示例代码

以下是使用el-upload组件实现自定义上传的示例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    
    <link
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div id="app">
      <el-upload
        action="http://localhost:8080/upload"
        name="file"
      >
        <el-button>上传文件</el-button>
      </el-upload>
    </div>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <script>
      const app = new Vue({
        el: '#app',
      });
    </script>
  </body>
</html>