微信小程序 - 10.图片上传

wx.chooseImage
从本地相册选择图片或使用相机拍照

属性名	类型	默认值	说明
count	number	9	最多可选择的图片张数
sizeType	Array.<String>	['original' , 'compressed']	所选的图片尺寸 : original : 原图 ; compressed : 压缩图
sourceType	Array.<String>	['album' , 'camera']	选择图片的来源 : album : 从相册选图 ; camera : 使用相机 ;
success	function		接口调用成功的回调函数 , 1. 返回 : tempFilePaths(Array.<String>) : 2. 图片本地的临时文件路径列表(本地路径) ; 3. tempFiles(Array.<String>) : 图片的本地临时文件列表
fail	function		接口调用失败的回调函数
complete	function		接口调用结束的回调函数(调用成功、失败都会执行)

res.tempFiles 的结构

属性名	类型	说明
path	string	本地临时文件路径(本地路径)
size	number	本地临时文件大小 , 单位B

布局文件 : wxml

<view class="question-form">
      <!-- 问题标题 -->
      <view class="question-input-area">
           <view class="question-title-area">
                <!-- 标题输入框 -->
                <input class="question-title" placeholder="请输入标题" maxlength="40" placeholder-style="color:#b3b3b3;font-size:18px;" bindinput="handleTitleInput"></input>
           </view>
           <!-- 问题正文区域 -->
           <view class="content-area">
                <!-- 多行输入框 -->
                <textarea class="content-text-area" placeholder="请输入问题的正文内容" maxlength="500" placeholder-style="color:#b3b3b3;font-size:14px" style="height:12rem" bindinput="handleContentInput"></textarea>
           </view>
       </view>
       <!-- 拍照选照按钮 -->
       <view class="question-images-area">
           <!-- 添加图片按钮 -->
           <view class="question-images-tool">
                 <button type="default" size="mini" bindtap="chooseImage" wx:if="{{images.length<3}}">添加图片</button>
           </view>
           <!-- 图片缩略图 -->
           <view class="question-images">
                 <block wx:for="{{images}}" wx:key="*this">
                        <view class="q-image-wrap">
                             <image class="q-image" src="{{item}}" mode="aspectFill" data-idx="{{index}}" bindtap="handleImagePreview"></image>
                             <view class="q-image-remove" data-idx="{{index}}" bindtap="removeImage"></view>
                        </view>
                 </block>
           </view>
        </view>
        <!-- 提交表单按钮 -->
       <button class="submit-btn" type="primary" bindtap="submitForm">提交</button>
</view>

样式文件wxss

/* 问题布局 */
.question-form{
    margin: 25rpx;
}
.question-input-area{
    background: #fff;
    border: 1rpx solid #f2f2f2;
    border-radius: 4rpx;
}
.question-title-area{
    display: flex;
    align-items:center;
    border-bottom: 1rpx solid #ccc;
    margin: 10rpx 30rpx;
    padding: 20rpx 0;
}
.question-title{
    flex: 1;
}
.content-area{
    padding: 20prx;
    margin: 20rpx 30rpx;
}
/* 图片布局 */
.question-images-area{
    padding: 40rpx 0;
}
.question-images-tool{
    display: flex;
    align-items: center;
}
.question-images{
    display: flex;
    align-items: center;
    margin-top: 40rpx;
}
.q-image-wrap{
    width: 31%;
    margin-right: 10rpx;
}
.q-image{
    flex: 1;
    height: 200rpx;
    width: 100%;
}
.q-image-remove{
    text-align: center;
}
/* 提交表单按钮 */
.submit-btn{
}

逻辑页面 : js

Page({
/**
* 页面的初始数据
*/
data: {
    title:'',//标题内容
    content:'',//正文内容
    images:[]//图片
},
//选择图片
chooseImage:function(e){
    var that = this
    wx.chooseImage({
        count:3,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: function(res) {
            const images = that.data.images.concat(res.tempFilePaths)
            that.data.images = images.length<=3 ? images : images.slice(0,3)
            that.setData({
                images: images
            })
       },
    })
},
handleImagePreview:function(e){
    const idx = e.target.dataset.idx
    const images = this.data.images
    wx.previewImage({
        current: images[idx],
        urls: images
    })
},