微信小程序云开发,上传图片到云数据库
·
下面是在你的发布任务页面中,添加图片上传功能的完整示例。主要思路:
-
在 WXML 表单中新增一个“添加图片”项,点击按钮调用
wx.chooseImage选取本地图片,并在界面上实时预览。 -
在 JS 中添加
chooseImage方法:先取图后上传到云存储,文件名用当前时间戳(Date.now())+扩展名,上传成功后保存fileID。 -
在
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 拉取并展示。
DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐

所有评论(0)