ElementUi上传图片/文件

最新推荐文章于 2024-10-31 19:26:00 发布

我滴旭呀

最新推荐文章于 2024-10-31 19:26:00 发布

阅读量492

点赞数

分类专栏：图片上传文件上传文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/weixin_48805549/article/details/131380313

版权

文件上传同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

图片上传

1 篇文章 0 订阅

订阅专栏

该段代码是一个Vue.js组件，用于实现风险管理方案的文件上传功能。它限制了可上传文件的类型，如.TXT,.WORD,.PDF等，并使用http-request自定义上传逻辑。当上传成功时，文件信息会被添加到fileListWord列表中，同时检查是否超出最大上传数量。如果上传失败或文件类型错误，会显示错误消息。

摘要由CSDN通过智能技术生成

 <el-form-item label="风险管理方案">
        <el-upload class="upload-demo" 
        action="#" 
        :file-list="fileListWord" 
        :http-request="uploadSectionFileWord">
            <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
    </el-form-item>
//上面是html 组件部分
//下面 方法
uploadSectionFileWord(params) {
    const loading = this.$loading({
      lock: true
    });
    let str = params.file.name
    let index = str.lastIndexOf(".")
    str = str.substring(index).toUpperCase();
    if (str === '.TXT' || str === '.WORD' || str === '.PDF' || str === '.EXCEL' || str === '.doc' || str ===
      '.EOCX' || str === '.XLSX' || str === '.DOC') {
      const file = params.file
      // 根据后台需求数据格式
      const form = new FormData();
      // 文件对象
      form.append("file", file);
      this.$http.post('/dangerpoint/uploadFile', form).then(res => {
        if (res.data.code === 0) {
          if (this.fileListWord.length >= 3) {
            this.$message.error('最多只能上传三个文件');
            loading.close();
          } else {

            let data = res.data.data
            this.fileListWord.push(data)
            // 获取所有路径的后缀
            for (let i = 0; i < this.fileListWord.length; i++) {
              let str = this.fileListWord[i].path
              let index = str.lastIndexOf(".")
              str = str.substring(index);
              this.fileListWord[i].filed = str
            }
            loading.close();
            this.$message('上传成功');
          }
        } else {
          loading.close();
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        loading.close();
        this.$message.error(e.message);
      });


    } else {
      this.$message.error('请上传正确文件');
      loading.close();
    }
  },