vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > 自定义elementui上传文件以及携带参数

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

作者:沃特艾文儿~

这篇文章主要介绍了自定义elementui上传文件以及携带参数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

自定义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 = []
      })
    }

element-ui上传文件携带参数到后台接收

前端

数据

后台

注意这里要对应,接收的不是mydata,而是具体的值

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文