elementUI之el-upload组件覆盖默认上传

原创已于 2022-08-24 11:45:51 修改 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #前端 #javascript

于 2022-07-27 16:39:56 首次发布

本文详细介绍了如何使用el-upload组件进行文件上传的自定义操作，包括关闭自动上传、设置上传地址为空字符串以及覆盖默认上传行为。重点讲解了http-request属性的使用，通过这个属性可以挂载上传函数并添加额外参数。在上传成功后，由于覆盖了默认上传，需要在自定义函数中处理成功回调。示例代码展示了如何生成FormData对象并进行文件上传。

el-upload组件

此文章主要针对覆盖默认上传部分

代码：


<el-upload ref="upload" action="''" :auto-upload="false" :http-request="httpRequest" :limit="1"
    :file-list="demandFileList"  :on-error="uploadFalse">
        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
        <el-button size="small" type="success" @click="submitUpload">上传到服务器</el-button>
</el-upload>


 methods: {
    async httpRequest(param) {
      let fileObj = param.file // 相当于input里取得的files
      let fd = new FormData()// FormData 对象
      fd.append('file', fileObj)// 文件对象
      fd.append('id', this.ATdemand.id)
      let data = await uploadCase(fd)
    },
     submitUpload() {
       this.$refs.upload.submit()
    }
 }

重点：

参数	说明	类型	默认值
action	必选参数，上传的地址	string
auto-upload	是否在选取文件后立即进行上传	boolean	true
http-request	覆盖默认的上传行为，可以自定义上传的实现	function

由于action参数必选，所以这边将他设置为空字符串‘ ’
auto-upload关闭立即上传
http-request挂载文件上传函数
通过点击上传按钮调用内置方法this.$refs.upload.submit( )，这个方法会调用http-request的方法，同时将文件作为param传入
需要附加参数可以在httpRequest内生成的FormData对象添加
覆盖默认上传会失去请求成功on-success方法的传参功能，可以在上传成功后通过返回参数自行判断