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