微信小程序上传图片后立即预览或替换页面上的图片

在微信小程序中，如果你想在用户选择并上传图片后立即预览或替换页面上的图片，你可以通过以下步骤实现：

1. 使用 wx.chooseImage 获取图片的临时路径。
2. 将获取到的临时路径存储在页面的数据中，以便在页面上显示。
3. 使用 wx.uploadFile 将图片上传至服务器。
4. 服务器处理图片并返回新的图片 URL。
5. 将服务器返回的图片 URL 更新到页面数据中，以更新页面上的图片。

以下是一个具体的示例代码：

Javascript

1Page({
2  data: {
3    imageUrl: '', // 初始化图片路径为空
4  },
5
6  // 选择图片
7  chooseImage: function() {
8    let that = this;
9    wx.chooseImage({
10      count: 1, // 选择图片的数量
11      sizeType: ['original', 'compressed'], // 原图或压缩图
12      sourceType: ['album', 'camera'], // 相册或相机
13      success(res) {
14        // 返回选定照片的本地文件路径列表
15        const tempFilePaths = res.tempFilePaths;
16
17        // 更新页面数据，显示图片
18        that.setData({
19          imageUrl: tempFilePaths[0]
20        });
21
22        // 开始上传图片
23        that.uploadImage(tempFilePaths[0]);
24      }
25    });
26  },
27
28  // 上传图片
29  uploadImage: function(filePath) {
30    wx.uploadFile({
31      url: 'https://example.com/upload', // 服务器上传地址
32      filePath: filePath,
33      name: 'file', // 服务器接收上传文件的参数名
34      formData: {}, // 可携带额外的表单数据
35      success(res) {
36        // 服务器返回的 JSON 数据
37        const data = JSON.parse(res.data);
38
39        // 更新页面数据，使用服务器返回的图片 URL
40        if (data && data.imageUrl) {
41          that.setData({
42            imageUrl: data.imageUrl
43          });
44        }
45      },
46      fail(error) {
47        console.error('上传失败', error);
48      }
49    });
50  }
51});

在页面的 WXML 结构中，你可以像这样使用 image 标签来显示图片：

Html

1<!-- 页面结构 -->
2<image src="{{imageUrl}}" mode="aspectFit"></image>

当用户选择图片后，chooseImage 方法会更新 imageUrl 的值，这将立即在页面上显示图片。然后，当图片上传并从服务器返回新的 URL 后，uploadImage 方法会再次更新 imageUrl，页面上的图片会自动更新为服务器返回的新 URL 对应的图片。

请确保你的服务器能够正确处理图片上传请求，并返回新的图片 URL。如果服务器端返回的不是 JSON 数据，请相应地调整 success 回调函数中的解析逻辑。