webuploader+vue写一个el-dialog支持本机电脑上多个文件的大文件点击确定上传的示例

WebUploader是一个强大的文件上传组件，结合Vue.js，我们可以构建一个支持用户选择本地多文件并通过`el-dialog`弹窗进行上传的简单示例。首先，你需要安装Vue及依赖库：

1. 安装Vue CLI：

npm install -g @vue/cli

2. 创建一个新的Vue项目：

vue create my-project
cd my-project

然后在项目中安装WebUploader和Element UI：

npm install vue-quill-editor webuploader element-ui --save

接着，在`src/components`目录下创建一个名为`UploadDialog.vue`的文件，并添加以下内容：

<template>
  <div>
    <el-dialog
      title="上传大文件"
      :visible.sync="dialogVisible"
      width="80%"
      center
    >
      <el-button slot="footer" @click="openFileDialog">选择文件</el-button>

      <webuploader
        ref="uploader"
        action=""
        :file-list="fileList"
        :on-success="handleSuccess"
        :before-upload="beforeUpload"
      ></webuploader>
    </el-dialog>
  </div>
</template>

<script>
import WebUploader from 'webuploader'
import { ElButton } from 'element-ui'

export default {
  components: {
    ElButton,
  },
  data() {
    return {
      dialogVisible: false,
      fileList: [],
    }
  },
  methods: {
    openFileDialog() {
      this.$refs.uploader.chooseFiles()
      this.dialogVisible = true
    },
    handleSuccess(res, file) {
      console.log('文件上传成功', res)
      // 这里可以将文件信息保存到服务器或处理列表
      // 更新fileList 或者清空文件列表准备继续上传
    },
    beforeUpload(file) {
      // 可能需要的文件大小、格式检查
      if (file.size > 10 * 1024 * 1024) { // 10MB限制
        alert('文件过大，请选择小于10MB的文件')
        return false
      }
      return true
    },
  },
}
</script>

注意：
- `action` 属性应该替换为你实际的文件上传URL。
- `beforeUpload` 钩子用于处理文件上传前的逻辑，例如大小验证。
- `handleSuccess` 钩子负责处理上传成功的回调，你可以在这里做进一步的数据处理。

最后别忘了在你的主入口文件`main.js`中引入并使用Element UI：

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

new Vue({
  render: h => h(App),
}).$mount('#app')