需求描述:

今天在vue+element ui开发过程中,遇到两个组件混合使用,上传组件返回一个带name的数组,这明显和图片预览需要图片列表的数组。

这个是大图预览组件:
2b6ba6aef76b930c949c1391e3c3e3f.png

 data() {
      return {
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        srcList: [
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
        ]
      }
    }

这个是上传图片组件:

73fcfe6f473ea862b064dfdfa80538a.png

data() {
      return {
        fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
      };
    },

以上不难看出如果想要混合使用必须要处理数组如下所示:

imgList: [{
        name: 'food.jpeg',
        url: 'http://www.kamtao.com/123.jpg'
    },
    {
        name: 'food2.jpeg',
        url: 'http://www.kamtao.com/123.jpg'
    }
]
//将上面数组转化为(从数组中的对象取出特定字段并生成新的数组):
imgList: [{
        url: 'http://www.kamtao.com/123.jpg'
    },
    {
        url: 'http://www.kamtao.com/123.jpg'
    }
]

解决办法:

// 使用map()生成数组
  getimglist(img){
        let arr = img
           return  arr.map(obj  => {return obj.url})
    }
// 可以直接在vue中使用
Last modification:August 7th, 2020 at 11:54 am
如果觉得我的文章对你有用,请随意赞赏