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

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},

 

Vue.js中使用iView架和vue-excel-import插件可以方便地实现前端读取Excel文件的功能,并将其数据渲染到页面上。以下是简单的步骤: 1. **安装依赖**: - 首先需要安装`vue-excel-import`库,它是一个轻量级的Excel导入组件。你可以通过npm或yarn进行安装: ``` npm install vue-excel-import iview axios # 或者 yarn add vue-excel-import iview axios ``` 2. **引入所需模块**: 在`main.js`或单文件组件的顶部,引入所需的组件和样式: ```javascript import { ElButton } from 'iview'; import ExcelReader from 'vue-excel-import'; import 'iview/dist/styles/iview.css'; import 'vue-excel-import/dist/vue-excel-import.css'; ``` 3. **配置Vue应用**: 在Vue实例的`mounted`生命周期钩子里,初始化Excel Reader组件并指定上传文件的方法: ```html <template> <div> <el-button @click="handleFileUpload">选择Excel文件</el-button> <ExcelReader ref="excelReader" :on-success="handleSuccess" :on-error="handleError"></ExcelReader> </div> </template> <script> export default { components: { ExcelReader, }, methods: { handleFileUpload() { this.$refs.excelReader.open(); }, // 接收解析后的数据 handleSubmit(file) { this.$refs.excelReader.submit(file); }, // 成功回调处理数据 handleSuccess(data) { const parsedData = data.records; // 解析的数据数组 this.renderToTable(parsedData); // 将数据渲染到表格或其他UI元素 }, // 错误回调处理错误信息 handleError(error) { console.error('Error:', error); }, renderToTable(data) { // 根据数据结构创建表格或使用iview的table组件 // 示例: this.tableData = data.map(row => ({ ...row, })); }, }, }; </script> ``` 4. **渲染数据**: `handleSuccess`函数接收的是一个包含所有行的对象数组,你需要将这个数组转换为你希望展示的格式,然后在`renderToTable`方法中,将数据赋值Vue组件的data属性,比如`<el-table>`。 5. **显示结果**: 现在你应该能看到一个表单按钮,点击后可以选择Excel文件。文件成功导入后,数据会被渲染到已设定好的`<el-table>`或者其他UI元素中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值