本文主要是介绍全栈经验总结(不间断更新),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
1.当后端传回来的值为列表套字典[{"id":1,"num":"1"},{"id":2"num":"3"}],如果要在vue3里面渲染图片,可以这样操作
<el-form-item label="图片:"><el-upload v-model:file-list="item.imgList" :data="{ id: item.id, gs_id: company_id }"action="/api/advance/ping_img/" list-type="picture-card" :on-remove="handleRemove":on-success="(response, file, fileList) => get_ping_sucess(response, file, fileList, item, ss)":on-preview="handlePictureCardPreview" :headers="{ token: etoken }" :limit="5"><el-icon><Plus /></el-icon></el-upload>
<span style="color:gray;font-size:13px;">最多只能上传五张图片</span>
</el-form-item>dian_slave(row) {$axios.get('/api/advance/slave/?id=' + row.id).then(res => {proxy.slave_table = res.data.data.data;proxy.slave_table.forEach((item, index) => {//图片默认值proxy.slave_table[index]['imgList'] = [];//获取图片list$axios.get('/api/advance/get_img/?id=' + item.id).then(res => {proxy.slave_table[index]['imgList'] = res.data.data.data.map((item, index) => {var obj = {url: item.file_url,id: item.file_code}return obj})})})})}
- proxy为挂理,slave_table的值为[{"id":1,"num":"1"},{"id":2"num":"3"}],js在不改变原有值的基础上增加新值的方法是.forEach((item,index)=>{})
- 当展示多张图片时,值为[{"id":1,"num":"1"},{"id":2"num":"3"}]类型,用方法.map((item,index)=>{})
2.当图片上传删除时,传id值,先在后端重新查询图片集合的值,因为页面操作数据库会有延迟,不能及时更新数值,所以要查询最新的值,再去查询与之相匹配的照片进行展示
这篇关于全栈经验总结(不间断更新)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!