在微信小程序中，如果你想在用户选择并上传图片后立即预览或替换页面上的图片，你可以通过以下步骤实现：
- 使用
wx.chooseImage获取图片的临时路径。 - 将获取到的临时路径存储在页面的数据中，以便在页面上显示。
- 使用
wx.uploadFile将图片上传至服务器。 - 服务器处理图片并返回新的图片 URL。
- 将服务器返回的图片 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 回调函数中的解析逻辑。
