图片上传 el-upload 单个图片写法
上传单个图片:
template:
<el-form-item label="上传图片" prop="result">
<el-upload
v-if="!formList.result"
class="upload-demo"
action='/api/jsonws/dlapp/add-file-entry'
:multiple="false"
:auto-upload="true"
:before-upload="beforeuplpad"
:http-request="uploadFileSuccess"
:on-error="handleUploadError"
accept=".jpg,.jpeg,.png"
>
<div class="up-box">
<i class="el-icon-plus avatar-uploader-icon"></i>
<span>点击上传图片</span>
</div>
</el-upload>
<div class="up-box" v-if="formList.result">
<i
@click.stop="formList.result = ''"
class="el-icon-close avatar-uploader-icon"
></i>
// formList.result 是字符串
<el-image
:preview-src-list="[url + formList.result]"
class="up-img"
v-if="formList.result"
:src="url + formList.result"
alt=""
></el-image>
</div>
</el-form-item>
methods:{
/*
* 上传之前的回调
* */
beforeuplpad(event) {
this.imgType = event.type;
let imgSize = Number(event.size / 1024 / 1024);
if (imgSize > 100) {
this.$message({
message: "文件大小不能超过100M,请重新上传。",
type: "warning",
});
return false;
}
},
uploadCert({ data, file }) {
uploadFile(file,{fileId:'',itemType:'cert'}).then(res=>{
this.formList.cert = res.data.savePath
})
},
/*
* 文件上传
* */
uploadFileSuccess({ data, file }) {
uploadFile(file,{fileId:'',itemType:'result'}).then(res=>{
this.formList.result = res.data.savePath
})
},
/*
* 上传失败回调
* */
handleUploadError(err) {
this.$message.error(`上传失败[${err}], 请重试`);
// Loading.service({
// text: "正在上传文件,请稍后...",
// }).close()
},
}
分类:
vue2
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期