2021级山软项目实训(七)——图像数据上传

目录

一、微信相册与相机权限

二、图像上传与取消

三、布局调整

---

一、微信相册与相机权限

        微信提供了打开相机和相册的接口，即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是用以判断是否含有图片，判断是大模型发来的信息和用户发送的信息由其他标识符进行判断，在这个的外层。