关于element-ui中的upload组件已表单的形式传递FormData

对于一些古老的项目，可能后端需要使用form表单的形式的接收，并且还会规定接收的key值

因为咱们项目中使用了element-ui，可以使用upload，但默认的upload是没办法使用form表单提交，并设置key的值

但element-ui给我们提供了一个http-request的方法，覆盖默认的上传行为，可以自定义上传的实现

 

代码：

// template

<el-upload style="height:auto" :http-request="UploadImage" action="/" :limit="1" :show-file-list="false">
    <h1>上传头像</h1> 
</el-upload>

 

// methods

UploadImage(param) { // 文件提交
            const formData = new FormData()
            formData.append('Filedata', param.file) // 要提交给后台的文件,并且字段的key为Filedata
            console.log(formData.get('Filedata')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
            let config = { // 添加请求头
                headers: { 'Content-Type': 'multipart/form-data' }
            };
            axios.post(this.BASEURL + '/project/upLoadPic', formData, config)
                .then(res => {
                    console.log(res, 'sssss');
                    this.imgUrl = res.picurl.replace(/\|\|/, '')
                    let reg = /(\|\|)(\S*)/
                    this.imgUrl2 = reg.exec(res.picurl)[2]
                    console.log('imgUrl2', this.imgUrl2)
                })
},