1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > el-upload 自定义请求上传图片 达到上传数量限制后 隐藏图片上传框

el-upload 自定义请求上传图片 达到上传数量限制后 隐藏图片上传框

时间:2022-05-02 21:41:03

相关推荐

el-upload 自定义请求上传图片 达到上传数量限制后 隐藏图片上传框

需求: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;}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。