vue element 图片上传的实现
参考
2.element ui实现简单上传图片、删除图片、预览图片
3.Vue+Element UI Upload 组件 上传单张图片去除后面的+号
4.Element UI Upload 组件 设置只允许上传单张图片的操作
实现效果:
代码
前端
<el-form-item label="背景图片" prop="scenseBgimgUrl" > <el-upload accept="image/jpeg,image/gif,image/png" :action="upload.url" list-type="picture-card" :auto-upload="true" :limit = "1" :on-preview="handlePictureCardPreview" :file-list="this.imageList" :on-success="handlePictureSuccess" :on-remove="handleRemove" :headers="upload.headers" > <i class="el-icon-plus"></i> </el-upload> </el-form-item> data() upload: { // 设置上传的请求头部 headers: { Authorization: "Bearer " + getToken() }, // 图片上传的方法地址: url: process.env.VUE_APP_BASE_API + "/scense/manage/image/upload",// 上传的图片服务器地址 }, ctImageInfoDOList: [], imageList: [], method() //上传成功 handlePictureSuccess(res, file) { if (res.code === 200) { this.uuid() const logo = this.uuidA file.logo = logo this.form.ctImageInfoDOList.push({ billType: res.data[0].billType, filePath: res.data[0].filePath, logo: logo }); file.status = "success" this.$message.success("图片上传成功"); } else { file.status = "error" this.$message.error("图片上传失败:" + res.msg); } }, uuid() { const s = [] const hexDigits = '0123456789abcdef' for (var i = 0; i < 36; i++) { s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1) } s[14] = '4' s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1) s[8] = s[13] = s[18] = s[23] = '-' this.uuidA = s.join('') console.log(s.join(''), 's.join("")') return this.uuidA }, //删除操作 handleRemove(file) { //alert(this.uploadUrl); //console.log(file, fileList); const c2 = this.form.ctImageInfoDOList.findIndex((ace) => ace.logo === file.logo) this.form.ctImageInfoDOList.splice(c2, 1) }, //图片放大 handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; },
后端:
/** * 图片上传 */ @PreAuthorize("@ss.hasPermi('scense:manage:image')") @PostMapping("/image/upload") public AjaxResult imageUpload( @RequestPart("file") MultipartFile[] uploadFiles) { return new AjaxResult(HttpStatus.SUCCESS,"success"); }
分类:
Vue
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [翻译] 为什么 Tracebit 用 C# 开发
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· 2分钟学会 DeepSeek API,竟然比官方更好用!
· .NET 使用 DeepSeek R1 开发智能 AI 客户端
· 刚刚!百度搜索“换脑”引爆AI圈,正式接入DeepSeek R1满血版