vue2.0+ElementUI实现上传文件功能

简介：管理后台的table列表，增加上传文件，文件格式不限，文件大小限制为100M，支持拖拽和点击上传文件两种方式，

上传文件需要调用后端接口。

一、效果图，点击导入出现diago弹框

 

 

 二、代码实现，使用element中的<el-upload/>实现

1.页面实现

 

 

 <el-upload

        class="upload-demo"

        :auto-upload="false"

        :on-change="uploadChange"

        action="string"

        :limit="1"

        drag

        :multiple="false"

      >

        <i class="el-icon-upload" />

        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>

        <div slot="tip" class="el-upload__tip">

          提示：请上传符合表储存格式的文件，文件超过100M请联系管理员上传

        </div>

      </el-upload>

      <div slot="footer" class="dialog-footer">

        <el-button @click="dialogTableVisible = false">取 消</el-button>

        <el-button type="primary" @click="handleAlbumSuccess">确 定</el-button>

      </div>

2.联调接口

 

 

 

 // 限制上传文件大小

    uploadChange(file) {

      this.fileList = file

      // 限制文件上传大小100M

      if (file.size / (1024 * 1024) > 100) {

        // 限制文件大小

        this.$message.error('当前限制文件大小不能大于100M')

        return false

      }

    },

 // 确定上传文件

    handleAlbumSuccess() {

      var form = new FormData()

      form.append('file', this.fileList.raw) // 二进流

      // 额外参数

      form.append('hdfsUrl', this.localtionList)

      filesUpload(

        form

      ).then((res) => {

        this.$message.success(res.msg)

        this.dialogTableVisible = false

      }).catch((error) => {

        this.$message.error(error.msg)

        this.dialogTableVisible = true

      })

    },