需求:1.图片上传请求的时候使用自定义 2.上传数量1张,上传了1张之后,隐藏上传框
步骤:
1.把 action 赋值为#字符串
添加 :http-request"
3.通过添加disabled的样式,控制达到上传数量后隐藏上传框
<el-upload :class="{ disabled: uploadDisabled }" :file-list="fileList" :http-request="upLoad" :limit="1" action="#" :list-type="'picture-card'">
<i class="el-icon-plus"></i>
</el-upload>
data() {
return {
// 上传成功后的图片显示
fileList: []
}
},
computed: {
//图片上传1张后,隐藏上传框
uploadDisabled() {
return this.fileList.length > 0
}
}
methods: {
upLoad(file){
let formData = new FormData()
//multipartFile:根据请求的参数名定义
formData.append('multipartFile', file.file)
//发送上传图片的请求
uploadIMg(this.form.roomId, formData).then(res => {
this.$modal.msgSuccess('上传成功')
this.fileList = [{ 'url': res.data.url }]
})
//清理一下图片
this.$refs.upload.clearFiles()
}
}
//上传图片封装的方法
export function uploadIMg(roomId,data) {
return request({
url: `/meeting/room/upload?roomId=${roomId}`,
method: 'post',
headers:{'content-Type':'multipart/form-data'}, //注意的点
data:data,
timeout:50000
})
}
//隐藏图片上传框的css
::v-deep.disabled {
.el-upload--picture-card {
display: none;
}
}