目录
一、微信相册与相机权限
微信提供了打开相机和相册的接口,即wx.chooseImage(),里面的sizeType是选择图片的形式,即压缩和原图。里面的sourceType则是选择图片的来源,其中Album是打开相册进行选择,Camera是打开相机进行拍摄。
获得的图片将暂存在TempFilePath中,我们把它保存到我们的image中,用以接收。
打开相机与相册的代码如下:
//点击图片图标
open_camera: function() {
var _this = this;
wx.chooseImage({
count: 1, // 默认9,这里设置为1表示只选一张图片
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
const tempFilePaths = res.tempFilePaths;
console.log(tempFilePaths);
_this.setData({
tempImagePath: res.tempFilePaths,
isImage: 1
});
},
fail: function(err) {
console.error(err);
}
});
},
二、图像上传与取消
我们在页面下方的输入框中添加了一个相册图标,点击就可以选择是打开相册还是打开相机。如图所示:
我们拍摄照片后或者选择相册中的照片之后,照片会在输入框的上方停留,等待输入内容一同上传,在此期间,可以点击图标切换图片或者重新拍摄, 也可以点击上方取消上传按钮取消上传这张图像,该框如图所示:
这个模块我们选择固定在屏幕的某个位置中,然后使用wx:if判断是否有照片存在,以此来判断是否显示这个组件。代码如下:
<!--显示图像的略缩图-->
<view wx:if="{{ isImage }}" class="tempImage">
<button bind:tap="cancelImage">取消上传</button>
<image src="{{ tempImagePath }}" mode="widthFix"></image>
</view>
三、布局调整
图片传上去之后,在对话框中显示会非常突兀,由于图片的比例失调问题,会造成图片变形,看上去非常难受,因此我们选择固定长度,让其高度自适应调整,代码如下;
<view wx:else if="{{ item.type == 0 }}" class="user-both">
<text>{{ item.content }}</text>
<image src="{{ item.url }}" mode="widthFix"></image>
</view>
其中type是用以判断是否含有图片,判断是大模型发来的信息和用户发送的信息由其他标识符进行判断,在这个的外层。