Uniapp 实现多图上传功能的方法

在 Uniapp 开发中，多图上传是一个常见的需求。实现这一功能，能为用户带来更丰富的交互体验，满足如商品发布上传多张图片展示、用户分享生活图片等场景。下面就详细介绍如何在 Uniapp 中实现多图上传功能。

我们要使用 UniApp 提供的 uni.chooseImage 方法来选择图片。该方法会调用系统的图片选择器，让用户可以选择本地图片。在页面的 JavaScript 代码中，定义一个方法，在方法内调用 uni.chooseImage。例如：

chooseImages() {
    uni.chooseImage({
        count: 9, // 最多可选 9 张图片
        sourceType: ['album', 'camera'], // 可从相册或相机选择
        success: (res) => {
            this.imagePaths = res.tempFilePaths;
        }
    });
}

这里的 count 参数决定了用户最多能选择的图片数量，sourceType 规定了图片来源。选择成功后，图片的临时文件路径会存储在 imagePaths 数组中。

接下来就是上传图片的操作。我们可以使用 uni.uploadFile 方法逐个上传图片。遍历 imagePaths 数组，对每一个图片路径进行上传：

uploadImages() {
    const that = this;
    this.imagePaths.forEach((path, index) => {
        uni.uploadFile({
            url: 'https://example.com/upload', // 上传接口地址
            filePath: path,
            name: 'file',
            success: (uploadRes) => {
                console.log('图片上传成功', uploadRes);
                // 处理上传成功后的逻辑，如显示上传结果
            },
            fail: (err) => {
                console.log('图片上传失败', err);
            }
        });
    });
}

在 uni.uploadFile 中，url 是服务器接收图片的接口地址，filePath 为要上传的图片临时路径，name 是上传文件的字段名。

为了提升用户体验，还可以添加图片预览功能。在页面的模板中，通过 v-for 指令遍历 imagePaths 数组，展示已选择的图片：

<view v-for="(path, index) in imagePaths" :key="index">
    <image :src="path" style="width: 100px; height: 100px;"></image>
</view>

通过以上步骤，我们就完成了 Uniapp 中多图上传功能的实现。从选择图片、上传图片到图片预览，每一步都紧密相连，为用户提供了流畅的多图操作体验。在实际应用中，可根据具体需求对代码进行优化和扩展，以适应不同的业务场景。