全栈经验总结(不间断更新)

1.当后端传回来的值为列表套字典[{"id":1,"num":"1"},{"id":2"num":"3"}],如果要在vue3里面渲染图片,可以这样操作


  
   
      
    
  
最多只能上传五张图片



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值,先在后端重新查询图片集合的值,因为页面操作数据库会有延迟,不能及时更新数值,所以要查询最新的值,再去查询与之相匹配的照片进行展示

你可能感兴趣的:(javascript,前端,vue.js)