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

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

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

res.tempFiles 的结构

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

布局文件 : wxml

      
      
           
                
                
           
           
           
                
                
           
       
       
       
           
           
                 添加图片
           
           
           
                 
                        
                             
                             
                        
                 
           
        
        
       提交

样式文件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
    })
},