微信小程序之图片上传并保存在服务器

先将图片上传到服务器，后端接口将保存好的图片地址返回给小程序，再将小程序中添加图像的图片的url替换为服务器中照片的存储地址（使微信小程序中显示出上传的图片）。

1、效果如下：

点击图像后选择图像：

结果：

2、源码：

wxml:

 <view class="form-item">
            <text class="form-item-label">上传二手书照片！</text>
            <view class="load-img1" bindtap="addImg">
                <image class="load-img" src="{{imageUrl}}" mode="aspectFill" />
            </view>
 </view>

js:

   //上传图片  
    addImg: function() {
        var self = this;

        // 开始上传图片到服务器
        wx.chooseImage({
            count: 1, // 设置最多可以选择的图片数量，默认为9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function(res) {
                var tempFilePaths = res.tempFilePaths[0];

                wx.uploadFile({
                    url: 'http://localhost:5000/upload',
                    filePath: tempFilePaths,
                    name: 'file',
                    formData: {},
                    method: 'POST',
                    success: function(uploadRes) {
                        const data = JSON.parse(uploadRes.data);

                        if (data.status === "success") {
                            console.log('图片上传成功，服务器返回结果：', data.message);
                            // 更新页面数据
                            self.setData({
                                imageUrl: data.url // 假设返回结果中的imageUrl字段是上传后图片的服务器地址
                            });
                        } else {
                            console.error('图片上传失败：', data.message || '未知错误');
                        }
                    },
                    fail: function(uploadErr) {
                        console.error('图片上传失败：', uploadErr);
                    },
                });
            },
            fail: function(err) {
                console.error('Choose image failed:', err);
            },
        });
    },

 `addImg` 函数负责处理用户添加图片的操作。
        首先，通过调用 `wx.chooseImage` 方法，允许用户从手机相册或相机中选择一张图片。参数指定了用户最多可以选择1张图片，可以选择原图或压缩图，且来源可以是相册或相机。
        当用户选择图片成功后，回调函数中的 `res.tempFilePaths[0]` 获取到临时文件路径，这是微信小程序提供的一个临时存放用户所选图片的地方。
        接着，使用 `wx.uploadFile` 方法将临时图片文件上传到服务器。指定的上传地址是 `'http://localhost:5000/upload'`，并通过 POST 请求方式上传。
        上传时，将临时文件路径作为 `filePath` 参数，同时设置了文件上传时的参数名称为 `'file'`，并且可能还附带了一些额外的表单数据（在这里为空对象）。
        如果图片上传成功，`uploadFile` 成功回调函数会被调用，解析服务端返回的 JSON 数据，检查其中的 `status` 字段是否为 `"success"`。如果是，则表示上传成功，打印成功信息，并将服务端返回的图片 URL 存储到组件的 `imageUrl` 数据中，以便在页面上展示。
        如果图片上传失败，无论是由于服务器返回的状态错误，还是上传过程中出现的问题，都会在相应的失败回调函数中捕获并打印错误信息。

注意：代码中提到的服务器返回地址 `'http://localhost:5000/upload'` 通常是在本地开发环境中的地址，实际部署时需要替换为真实服务器的上传接口地址。