自定义elementui上传文件以及携带参数

elementui提供了上传文件的ui，可以比较方便，我们需要它来完成自定义上传文件以及携带参数需要改写其中的一些方法来实现。

下面是一个简单的上传标签

    <el-upload
        ref="upload"
        style="display: inline"
        drag
        action=""
        :before-upload="beforeUploadHandle"
        :http-request="handleUploadForm"
        :auto-upload="false"
        multiple
        :limit="1"
        :on-exceed="handleExceed">
      <el-link icon="el-icon-paperclip" type="primary">添加需要上传的文件</el-link>
    </el-upload>

不自动上传

:auto-upload=“false”

限制上传文件个数

:limit=“1”

上传之前的校验

我们需要实现这个方法，来检测上传的合法性

:before-upload=“beforeUploadHandle”

上传时需要携带参数

需要上传的数据文件以及参数在这里来处理添加

:http-request=“handleUploadForm”

检测添加文件是否超过限制

:on-exceed=“handleExceed”

手动上传

其中的upload对应于上面的ref=“upload”，我们只需要给按钮实现一个方法执行此语句便可以实现自己点击上传

this.$refs.upload.submit();

具体实现

上传限制以及上传之前的校验不赘述，这里给出一个简单的demo。上传限制实现类似，只是给出一些提示信息，file便是我们上传的文件。

    beforeUploadHandle(file) {
      if (
          file.type !== "image/png" &&
          file.type !== "image/jpeg"
      ) {
        this.$message.error("只支持.jpg、.jpeg、.jpe、.png文件！");
        return false;
      }
    },

携带参数

handleUploadForm(param) {
      console.log(this.pid)
      let thisInfo = this
      let formData = new FormData()
      // 在formData中加入我们需要的参数
      formData.append('file', param.file)
    	formData.append('id', this.pid)
    // 向后端发送数据
      thisInfo.$axios.post('api/user/update_Info/', formData).then((res) => {
        if (res.status === 200) {
          thisInfo.$message.success('修改信息成功')
        } else {
          thisInfo.$message.success('修改信息失败')
        }
        thisInfo.formFileList = []
        thisInfo.uploadFormFileList = []
      })
    }