Elementplus遇到的问题
  • 问题1:
    el-upload 手动上传图片,,上传之后,,el-upload 中插槽的图片无法显示,,,官网也是无法显示
    • 手动上传图片,,,返回图片的url,,然后在上传表单
      在这里插入图片描述
  <el-form-item label="图片" prop="imgUrl"  ><img v-if="form.imgUrl" :src="form.imgUrl" class="avatar"/><el-upload :before-upload="handleBeforeUpload" action="#" list-type="picture-card" :auto-upload="true" :limit="1" :on-exceed="handleExceed" ref="upload"><img v-if="false" src="#" class="avatar" /><el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon></el-upload></el-form-item>
const uploadFile = (file)=>{var formData = new FormData();formData.append("file",file)return http.post("/upload",formData,{headers:{"Content-Type":"multipart/form-data"}})
}
let imgUrl = ref("")
const handleBeforeUpload = async (file) => {console.log(file)if (file.type !== "image/jpeg" && file.type !== "image/png") {ElMessage.error("图片格式不对")return false} else if (file.size / 1024 / 1024 > 5) {ElMessage.error("太大")return false;}let {data: res} = await uploadFile(file)form.imgUrl = res// 阻止默认上传return false
}

引用:https://blog.csdn.net/weixin_71403100/article/details/132539971