下面是在你的发布任务页面中,添加图片上传功能的完整示例。主要思路:

  1. 在 WXML 表单中新增一个“添加图片”项,点击按钮调用 wx.chooseImage 选取本地图片,并在界面上实时预览。

  2. 在 JS 中添加 chooseImage 方法:先取图后上传到云存储,文件名用当前时间戳(Date.now())+扩展名,上传成功后保存 fileID

  3. onSubmit 中,将图片的 fileID 一并写入数据库。


修改后的 WXML:

<view class="head-bg">
  <view class="lb_container">
    <form bindsubmit="onSubmit">
      <!-- 原有各项省略… -->

      <!-- 新增:图片上传 -->
      <view class="lb_card">
        <view class="form-item">
          <text class="label">上传图片</text>
          <view class="img-uploader">
            <block wx:if="{{!imageFileID}}">
              <button type="button" bindtap="chooseImage" class="btn-upload">选择图片</button>
            </block>
            <block wx:elif="{{imageTempPath}}">
              <image src="{{imageTempPath}}" mode="aspectFill" class="preview-img" bindtap="previewImage"/>
              <button bindtap="removeImage" class="btn-remove">移除</button>
            </block>
          </view>
        </view>
      </view>

      <!-- 发布按钮 -->
      <button formType="submit" class="btn-publish">发布</button>
    </form>
  </view>
</view>

样式示例 (可自行调整):

.img-uploader { display: flex; align-items: center; }
.preview-img { width: 120rpx; height: 120rpx; margin-right: 10rpx; border-radius: 8rpx; }
.btn-upload, .btn-remove { background-color: #409EFF; color: #fff; padding: 10rpx 20rpx; border-radius: 6rpx; }

修改后的 JS(Page 对象中新增字段与方法):

Page({
  data: {
    // … 之前的字段 …
    imageTempPath: '',   // 本地预览路径
    imageFileID: '',     // 云存储 fileID
  },

  // 选择并上传图片
  chooseImage() {
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album','camera'],
      success: res => {
        const tempPath = res.tempFilePaths[0];
        this.setData({ imageTempPath: tempPath });

        // 生成时间戳文件名 + 后缀
        const ext = tempPath.match(/\.\w+$/)[0];
        const cloudPath = `task-images/${Date.now()}${ext}`;

        // 上传到云存储
        wx.cloud.uploadFile({
          cloudPath,
          filePath: tempPath
        }).then(uploadRes => {
          this.setData({ imageFileID: uploadRes.fileID });
          wx.showToast({ title: '上传成功', icon: 'success' });
        }).catch(err => {
          wx.showToast({ title: '上传失败', icon: 'none' });
          console.error('upload error', err);
        });
      }
    });
  },

  // 预览图片
  previewImage() {
    wx.previewImage({
      urls: [ this.data.imageTempPath ]
    });
  },

  // 移除已选图片
  removeImage() {
    this.setData({
      imageTempPath: '',
      imageFileID: ''
    });
  },

  // 提交表单
  onSubmit(e) {
    const db = wx.cloud.database();
    const data = {
      // 新增图片字段
      imageFileID: this.data.imageFileID || ''
    };

    db.collection('task').add({ data })
      .then(res => {
        wx.showToast({ title: '任务发布成功', icon: 'success' });
        // 重置图片
        this.setData({ imageTempPath: '', imageFileID: '' });
      })
      .catch(err => {
        wx.showToast({ title: '发布失败,请重试', icon: 'none' });
        console.error(err);
      });

    // … 其余模板消息逻辑保持不变 …
  },

  // … 其余方法保持不变 …
});

这样,当用户点击“选择图片”时,会打开相册/相机,选定后立即上传到云存储并用时间戳命名;表单提交时,把 imageFileID 一并写入 task 集合。你可以根据需要在列表或详情页用 wx.cloud.getTempFileURL 拉取并展示。

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐