当前位置：首页 > article >正文

全栈经验总结（不间断更新）

article 2024/11/17 13:58:41

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)=>{})