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

最新推荐文章于 2024-07-24 13:53:49 发布

sssammmm

最新推荐文章于 2024-07-24 13:53:49 发布

阅读量2.3k

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/sumdeveloper/article/details/132430452

版权

要点说明：

使用: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)
            })
        },