iview+vue 利用Upload图片上传成功后input框无法赋值的问题

社区论坛源码技术解析:从部署到高并发实战指南 社区论坛是典型的Web应用系统,其本质是基于用户交互、内容管理与实时通知的动态服务架构。理解其底层原理需掌握MVC分层设计、RBAC权限模型、缓存策略(Redis)、数据库事务与索引优化等核心技术。现代社区系统普遍采用Laravel+Vue+MySQL+Redis技术栈,依托Tailwind CSS实现响应式UI,通过WebSocket提升实时性,并借助CDN与OPcache优化性能。这类源码并非开箱即用的静态模板,而是面向中高级开发者、CTO及创业者的技术验证平台,适用于MVP快速迭代、架构学习与社区产品 阅读详情

iview绘制表单时其中利用upload上传图片 ,然后将图片url赋值给input,代码如下,

<i-col span="16">
	<Form-item label="icon链接" prop="iconUrl">
		<i-input v-model="channel.iconUrl" placeholder="icon链接" readonly/>
	</Form-item>
</i-col>
<i-col span="3">
	<Form-item :label-width="1">
		<Upload style="width: 300px;" action="../sys/AliyunOss/upload" :format="['jpg','jpeg','png']"
				max-size="10"
				:on-success="handleSuccessIconUrl" :on-format-error="handleFormatError"
				:show-upload-list="false"
				:on-exceeded-size="handleMaxSize">
			<i-button icon="ios-cloud-upload-outline">上传图片</i-button>
		</Upload>
	</Form-item>
</i-col>

页面如下

但是,图片上传成功了,但是input中通过channel.iconUrl赋值没有成功,我这里的问题是因为定义channel时未定义iconUrl属性造成的组件赋值失败,

这里将对应的至定义出来,upload组件赋值时就不会出问题了。

channel: {name:'',url:'',iconUrl:'',sortOrder:1},

 

RK3588开发板RKNPU2环境部署实战:更新rknn_server与librknnrt.so详解 本文详细介绍了在RK3588开发板上更新rknn_server与librknnrt.so核心组件的完整实战流程。通过adb工具推送文件、设置权限并执行同步操作,确保RKNPU2环境部署成功,从而解决推理速度慢或初始化失败等问题,提升AI模型运行效率与稳定性。 阅读详情

相关推荐

SAP SD RRB实战:从DIP参数文件到DP90/DP91开票的完整链路解析

本文详细解析了SAP SD模块中RRB(Resource-related Billing)业务场景的完整链路,从DIP参数文件配置到DP90/DP91开票操作。通过实战案例分享DIP参数文件的核心配置技巧、特性设置及物料决定要点,帮助用户掌握动态开票的关键技术,提升SAP SD RRB的实施效率。

weixin_26833939的博客 378

【uniapp uView input赋值失效问题】

uniapp input框赋值失效

qq_42215960的博客 1490

变压器耦合放大器(低频应用+高频应用)

变压器耦合放大器(低频应用+高频应用)

m0_54943120的博客 2275

iView的Upload组件实现上传图片预览

在iView官方给出的upload组件上传图片案例中,图片的预览在每上传一个图片调一次接口,后台将图片存入数据库后,再回传给前端来实现图片预览。而大多情况我们只是想先预览图片内容是否正确上传图片。 针对这种情况, 1.我们可以先获取图片的base64即图片的在我们本机的绝对路径; handleUpload (file) { ...

canyang666666的博客 2637

CPU设计实战:Loongarch版 lab6--20条指令单周期CPU

这个debug卡我时间最长的就是通用寄存器的写使能信号,当时一直没找到,甚至把golden—trace生成了一遍又一遍,对照test,检查了各种,卡了很长时间,我都以为是我之前哪一步搞错了,或者环境什么的,但是一步步做下来并没有,并且“机器永远是对的”让我终于查到了错。debug到一半才想起来写个博客,就不写过程了,下个lab再写过程。下面是两个模块的代码,运行已通过仿真验证。其他的bug就还好,如果认真跟着。就能马上找出来,,上面的每一句话都很重要。走,按逻辑检查并且查。

m0_65369544的博客 6303

Python画好看的雷达图,全网开源代码最好看的

【代码】Python画好看的雷达图,全网开源代码最好看的。

大模型天花板 2281

Vue form表单input框 手动赋值未生效

前言 在VUE项目开发过程中,遇到一个很奇怪的表单赋值问题,赋值为生效,而当遇到下拉框切换时,上一个值显示出来了。 定位问题 1、在data中只定一个formData对象,其中有20多个表单项未定义 2、当后端数据返回时,前端直接赋值,未生效,采用$forceupdate()解决了问题 3、但是又偶然遇到另一个问题,就是必须下拉框变化时才更新数据。 原因 原因:如果在实例创建之后添加新的属性到实例上(赋值),它不会触发视图更新。 由此Vue实例创建时,表单属性名并未声明,因此Vue就无法对属性执行 gett

sunshineTing2的博客 4749

GPU 运维实战:H100/H800/B300 换卡与压测

(烧多久、看什么、什么算合格)。文末还给了一个能直接跑的验收判定脚本,三个真实场景的裁决输出都在。

老韩的Linux云计算架构师进阶之路 271

iview关于Upload 上传遇到的问题

一、关于图片上传回显的解决办法(这里用的是自定义上传列表) 将数据push进去就行,有参考https://segmentfault.com/q/1010000011053027 console.log('编辑'); console.log(this.formProductData);<br>//先清空数组,不然回显的时候,上次的图片回影响到这次的结果<br>this.upl...

weixin_43085797的博客 1719

【数据集实例】CMIP6气候模式数据下载-以河东地区为例

以河东地区为例,介绍CMIP6数据下载及处理

WW、forever的博客 4943

2021.07.05【R语言】丨预测lncRNA并绘制venn图

目录摘要环境与方法依赖工具预测工具绘制工具使用命令预测lncRNA统计noncoding_ID绘制Venn图结果展示总结 摘要 接到一个单样品测lncRNA数据的项目,正好拿来练练手,梳理一下lncRNA流程。这里记录预测lncRNA并生成venn图的过程 环境与方法 R version 3.6.3 (2020-02-29) 依赖工具 预测工具 CPC2 CNCI Pfam CPAT 绘制工具 R:VennDiagram 使用命令 预测lncRNA CPC2 #更换env conda activate py

2035

iview Upload组件的坑

iview Upload 上传显示进度条的坑 直接先来光放代码 上官方文档 demo 代码 <template> <div class="demo-upload-list" v-for="item in uploadList"> <template v-if="item.status === 'finished'"> <img ...

lijie627239856的博客 1万+

四非人的保研之路,2024(2025届)四非计算机的保研经验分享(西南交通、苏大nlp、西电、北邮、山软、山计、电科、厦大等)

本身我就是福建人,xmu 3小时就能到家,然后导这边毕业要求容易,不想读博,达到要求就能放实习,每周打卡35h,比较自由,遂考虑。北邮弱com,联系了蛮多老师,几乎都给了考核机会,面试的老师好几位都考核人工智能基础,会问你卷积的计算,问的还是蛮细的。当时结果是暂定,以为是稳了,遂没联系其他老师,但是之后询问发现只是候补,懒得联系其他老师,928候补到,放弃。东北大学,2000人大机试,入营点送,全国巡回面试,每个人就面不到10分钟,我就被问了3个问题就结束了,候补。科研组,导师有人脉,想读博出成果可以去。

专注于AI领域前沿知识,业余爱好开发软件 4352

render函数内用ajax,vue+iview组件,render函数,table render Input,Tooltip,Select Option,Upload各种标签的render函数举例...

iview 组件用法iview render 函数1.table render Inputrender: (h, params) => {return h('Input',{props:{ //属性value: params.row.prizeName,maxlength: 8,},on: {'on-change':(e) => {this.tableData[params.index...

weixin_29001419的博客 904

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

vue中使用input file上传文件

刚刚学习前端的时候还是觉得这个东西好难的样子,后来第一家公司由于没有这个需求就没用过,现在这家公司由于要求很完美的组件,我就是用的vue组件vue-image-crop-upload(适用于pc端的比较好的组件),先在这里记录用法下次再去把vue-images-crop-upload这个组件记录下...

dengzihao1023的博客 9698

蓝牙模块HM-10手册

蓝牙模块HM-10手册,该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

input file文件上传_记录——input[type=file]的上传单张图片和多张图片

背景:项目里有个简单的要求,有个表单要上传图片,但在尺寸大小上有所限制,原谅我总是用插件,我这次用了IVIEWUI,发现UpLoad组件只有对占内存大小进行限制。于是不得不靠度娘,谷哥等。经过一番收集,发现几种不错的方案。首先,是“canvas”压缩大法!这个方法有个最大的好处就是不管用户上传什么图片,最后传到服务器都能变成某个范围大小的图片,几乎不用用户做什么,可谓体验良好。当时看了第一眼就觉得...

weixin_39715926的博客 320

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

input 上传图片_记录——input[type=file]的上传单张图片和多张图片|精选博客

背景:项目里有个简单的要求,有个表单要上传图片,但在尺寸大小上有所限制,原谅我总是用插件,我这次用了IVIEWUI,发现UpLoad组件只有对占内存大小进行限制。于是不得不靠度娘,谷哥等。经过一番收集,发现几种不错的方案。首先,是“canvas”压缩大法!这个方法有个最大的好处就是不管用户上传什么图片,最后传到服务器都能变成某个范围大小的图片,几乎不用用户做什么,可谓体验良好。当时看了第...

weixin_39668479的博客 1192

input上传第二次时删除第一次_记录——input[type=file]的上传单张图片和多张图片|精选博客...

背景:项目里有个简单的要求,有个表单要上传图片,但在尺寸大小上有所限制,原谅我总是用插件,我这次用了IVIEWUI,发现UpLoad组件只有对占内存大小进行限制。于是不得不靠度娘,谷哥等。经过一番收集,发现几种不错的方案。首先,是“canvas”压缩大法!这个方法有个最大的好处就是不管用户上传什么图片,最后传到服务器都能变成某个范围大小的图片,几乎不用用户做什么,可谓体验良好。当时看了第...

weixin_42244017的博客 292

ashx获取input file 文件_记录——input[type=file]的上传单张图片和多张图片

背景:项目里有个简单的要求,有个表单要上传图片,但在尺寸大小上有所限制,原谅我总是用插件,我这次用了IVIEWUI,发现UpLoad组件只有对占内存大小进行限制。于是不得不靠度娘,谷哥等。经过一番收集,发现几种不错的方案。首先,是“canvas”压缩大法!这个方法有个最大的好处就是不管用户上传什么图片,最后传到服务器都能变成某个范围大小的图片,几乎不用用户做什么,可谓体验良好。当时看了第一眼就觉得...

weixin_33649132的博客 179

vue上传图片的base64实现

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-sca.

u014069424的专栏 1092

form-builder vs 传统表单开发:为什么它能成为OA系统的首选工具?

在现代企业管理系统开发中,表单开发是每个开发者都会面临的挑战。无论是政务系统、OA系统、ERP系统还是电商系统,表单都是数据交互的核心界面。今天,我们将深入探讨**PHP表单生成器form-builder**与传统表单开发方式的对比,揭示为什么这款工具能成为OA系统的首选解决方案。😊 ## 传统表单开发的痛点与挑战 在传统表单开发中,开发者需要手动编写大量的HTML、CSS和JavaScri

gitblog_01142的博客 505

关于uniapp七牛云上传头像后,无法给data数据赋值的问题

关于vue头像上传后this指向问题

lwhuaijin的博客 311

avue 上传图片无法回显

在最近的项目中, 使用了avue2.6.1版本的上传图片组件, 只需要上传一个图片,遇到了一些问题, 记录一下解决方法, 配置如下: { label: '封面图片', prop: 'coverPic', type: 'upload', hide:true, row: true, loadText: '附件上传中,请稍等', listType: "picture-img", limi

weixin_42792507的博客 5027

可以直接使用的vue3图片上传组件

使用websocket进行分块上传图片

qq1256382146的博客 1824

vue中使用iview上传图片成功后清除信息

1.添加ref <template> <Upload ref="uploadimgs" action="http://api1.vue1.com/index/system/uploadimg" :on-success="imguploads" > <Button icon="ios-cloud-upload-outline">上传图片</Button>

weixin_44432032的博客 1292

vue上传文件遇到的坑

vue上传文件遇到的坑请求头加了超时时间为1000,导致上传错误 请求头加了超时时间为1000,导致上传错误

weixin_42475867的博客 982
上一篇: 英特尔显卡笔记本屏幕自动调光功能导致屏幕闪烁----笔记本显示器闪烁
下一篇: window7、window10安装redis、开启远程连接及可视化界面工具
grootblockchain
博客等级 码龄11年 55粉丝 101原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值