ElementUI upload组件使用自己接口上传图片
2019-01-22
6,863 views
1 min read
项目用到了ElementUI
作为UI框架,在做一些上传图片的功能时也自然用到了upload
组件。
upload
组件自带有异步上传图片的功能的,当然想用自己的接口也是可以的,只需要在before-upload
事件里调用自己的接口,并在最后返回false
,组件就不会调用自己的上传方法。但是action
参数必须要有,任意填或为空都可以。
<el-upload
class="avatar-uploader"
action=""
:before-upload="beforePicUpload"
:show-file-list="false">
<el-button type="primary" icon="el-icon-plus" circle ></el-button>
</el-upload>
...
beforePicUpload (file) {
const isLt1M = file.size / 1024 / 1024 < 1
if (!isLt1M) {
this.$message.error('上传头像图片大小不能超过 1MB!')
return false
}
//这里是我将file作为参数传给了我的接口
this.$api.addSwiper([file]).then(res => {
if (res.result) {
this.$message.success('上传成功')
this.renderData()
} else {
this.$message.error('上传失败')
}
})
return false
},
...
传给接口后通过FormData
以表单的形式传递给后台
...
addSwiper: (params) => {
let [ file ] = params
let fd = new FormData()
fd.append('file', file)
return request({
url: `...`,
method: 'post',
data: fd
})
},
...
Previous Post
VMware 安装黑苹果
Or you can contact me by Email