- 问题1:
el-upload 手动上传图片,,上传之后,,el-upload 中插槽的图片无法显示,,,官网也是无法显示- 手动上传图片,,,返回图片的url,,然后在上传表单
- 手动上传图片,,,返回图片的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