使用el-upload,实现列表遍历添加图片

<el-table-column label="图片" align="center">
	<template slot-scope="scope2">
		<el-upload
			:show-file-list="false"
			:headers="headers"
			:data="{pathCode: 4}"
			:on-success="(value)=> uploadPicUrl(1, scope.$index, scope2.$index, value)"
			action="http..."
			class="avatar-uploader"
			accept=".jpg,.jpeg,.png,.gif">
			<img v-if="scope2.row.imgUrl" :src="scope2.row.imgUrl" style="width:40px;" class="avatar">
			<i v-else class="el-icon-plus avatar-uploader-icon"/>
		el-upload>
	template>
el-table-column>

重点记录

// 上传图片时带参数
:data="{pathCode: 4} //真的要多看看文档,我之前用来很笨很不专业的方法实现效果的,又累
// 图片上传成功后回调的方法,value是接口返回的值,其他参数是我需要的参数,方便我异步改变数据值
:on-success="(value)=> uploadPicUrl(1, scope.$index, scope2.$index, value)" // 使用的太方便啦

膜拜大神

你可能感兴趣的:(工作中遇到的问题)