el-upload组件调用后端接口上传文件实践

 要点说明：

• 使用:http-request覆盖默认的上传行为，可以添加除文件外的其他参数，注意此时仍需保留action属性，action可以传个空串
• 给http-request属性绑定的函数，函数入参必须为param
• 调用接口请求，注意

  headers:{

  'content-type':'multipart/form-data'

  }时，请求参数需要通过new FormData()方式传入

• 获取上传接口返回值：this.uploadFileUrl2 = res.data.data

<el-upload
                    class="upload"
                    drag
                    action=""
                    :http-request="uploadFileHttp1"
                    :data="uploadData"
                    :file-list="fileList"
                    :limit="1"
                    list-type="picture">
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">图片1<em>（点击上传）</em></div>
                </el-upload>

 

 data() {
        return {
           
            fileList: [],
            uploadFileUrl1:''
            
        }
    },

 

uploadFileHttp1(param) {
            var file = param.file 
            let params = new FormData()
            params.append("upload_type", 'public');
            params.append("file", file);
            axios({
                method:'post',
                url:'https://xxxxx/upload_file',
                data:params,
                headers:{
                    'content-type':'multipart/form-data'
                }
            }).then(res => {
                console.log(res)
                this.uploadFileUrl1 = res.data.data
                
            })
            .catch(err => {
                console.log(err)
            })
        },