Uniapp 中图片上传与预览的实现方法

在 Uniapp 开发中，图片上传与预览功能是十分常见且重要的需求。下面将详细介绍其实现方法。

首先是图片选择与预览。Uniapp 提供了便捷的 API 来实现这一功能。通过 uni.chooseImage 方法，能够轻松从本地相册选择图片或使用相机拍照获取图片。例如：

uni.chooseImage({
  count: 1, // 最多选一张图片
  sourceType: ['album', 'camera'], // 可选相册或相机
  success: (res) => {
    this.imageUrl = res.tempFilePaths[0]; // 将选择的图片路径保存到变量中
  }
});

在页面模板中，只需将保存的图片路径绑定到 image 组件的 src 属性上，即可实现图片预览：

<image :src="imageUrl" mode="widthFix"></image>

接下来是图片上传。要将选择的图片上传到服务器，可使用 uni.uploadFile 方法。在调用该方法前，需确保已获取到图片的本地路径。示例代码如下：

uni.uploadFile({
  url: 'https://example.com/upload', // 服务器上传接口地址
  filePath: this.imageUrl, // 要上传的图片本地路径
  name: 'file', // 服务器接收文件的字段名
  success: (res) => {
    if (res.statusCode === 200) {
      const data = JSON.parse(res.data);
      console.log('图片上传成功', data);
    }
  }
});

在实际应用中，可能还需要处理上传进度、错误提示等功能。可以通过 uni.uploadFile 的 progress 回调函数监听上传进度，在 fail 回调函数中处理上传失败的情况。

另外，若要实现多图上传与预览，只需调整 uni.chooseImage 的 count 参数，并在数据结构上进行相应调整，以存储多个图片路径。上传时，可以遍历图片路径数组，依次调用 uni.uploadFile 方法实现多图上传。

通过以上步骤，在 Uniapp 中就能顺利实现图片上传与预览功能，满足各种业务场景的需求，为用户带来更丰富的交互体验。无论是简单的单图操作还是复杂的多图处理，都能高效地完成。