1. Uniapp返回图片数组的方法
在Uniapp中，可以通过多种方式返回图片数组，其中最常用的是通过<input>标签实现选择文件并返回其文件路径。具体代码实现如下：
<input @change="onChooseImage" type="file" accept="image/*" multiple>
其中，accept="image/*"表示仅能选择图片文件，multiple表示允许选择多张图片文件。在@change事件中，可以通过e.target.files获取到选择的所有文件，进而获取它们的文件路径。
2. 处理图片数组
2.1 使用for循环
可以通过for循环和FileReader实现对图片数组的依次处理。具体代码如下：
onChooseImage(e) {
let files = e.target.files
let images = []
for (let i=0; i < files.length; i++) {
let reader = new FileReader()
reader.readAsDataURL(files[i])
reader.onload = e => {
images.push(e.target.result)
if (images.length === files.length) {
// 处理完所有的图片
}
}
}
}
上面的代码中，images数组用于存储所有的图片文件Base64编码后的数据。每次循环，都会使用FileReader读取当前图片文件的数据，并将其加入images数组中。当images数组的长度等于选择的文件数量时，表示所有的图片都已经处理完毕，可以进行后续操作。
2.2 使用Promise.all
使用Promise.all也可以实现对图片数组的处理。具体代码如下：
onChooseImage(e) {
let files = e.target.files
let promises = []
for (let i=0; i < files.length; i++) {
let promise = new Promise((resolve, reject) => {
let reader = new FileReader()
reader.readAsDataURL(files[i])
reader.onload = e => {
resolve(e.target.result)
}
})
promises.push(promise)
}
Promise.all(promises).then(images => {
// 处理所有的图片
})
}
上述代码中，首先定义了一个promises数组，用于存储每个图片文件的处理Promise对象。在循环中，对每个图片文件都创建一个Promise对象，使用FileReader读取其数据，并在resolve中返回Base64编码的数据。将每个Promise对象存入promises数组中，并使用Promise.all等待所有的Promise对象都完成后，执行then中的回调函数，将Base64编码的数据以数组形式传递。
3. 将图片数组展示在页面上
3.1 使用v-for指令
在Vue模板中，可以使用v-for指令遍历图片数组，将每个图片文件显示出来。具体代码如下：
<template>
<div>
<img v-for="image in images" :src="image">
</div>
</template>
上述代码中，v-for指令遍历images数组，将每个元素赋值给image变量。在模板中使用:src绑定图片的数据源，即可将图片显示出来。
3.2 使用v-bind动态绑定
如果无法确定图片数量，可以使用v-bind指令动态绑定img元素的数量和数据源。具体代码如下：
<template>
<div>
<img v-bind="imgAttrs" v-for="(image, index) in images" :key="index" :src="image">
</div>
</template>
<script>
export default {
data() {
return {
images: [], // 图片数组
imgAttrs: { // 默认img标签属性
width: '100%',
height: 'auto'
}
}
},
computed: {
imgCount() { // 动态绑定img标签的数量
return this.images.length
}
},
watch: {
imgCount() { // 监听img标签的数量变化，更新imgAttrs属性
this.imgAttrs = {
width: (100 / this.imgCount) + '%',
height: 'auto'
}
}
}
}
</script>
上述代码中，使用v-bind指令绑定了img元素的默认属性，即宽度为100%，高度根据比例计算。在v-for中，使用image变量遍历图片数组，并将图片数据源绑定到src属性上。同时，:key属性使用index避免每次images数组变化时，页面发生不必要的刷新。
在computed中，定义了一个计算属性imgCount，用于动态绑定img元素的数量。在watch中，监听imgCount，每次变化时更新imgAttrs的属性值，从而在整个数组变化后动态更新img元素的样式。
总结
本文介绍了在Uniapp中如何返回图片数组，并展示在页面上的方法。其中包括使用for循环、Promise.all等方式处理图片数组，以及使用v-for指令和v-bind动态绑定展示图片。