微信小程序-上传图片至阿里云

背景：最近有做这种需求，闲暇之余记录下，文章的内容有参考别人的代码，找不到链接了，就不放了
效果图如下展示：

html代码：

<!-- 容器 -->
<view class='ui_uploader_cell'>
    <!-- 根据已选择的图片临时路径数组展示图片-->
    <view class='ui_uploader_item' wx:for="{{uploaderList}}" wx:key="index">
        <!-- 删除-->
        <icon class='ui_uploader_item_icon' bindtap='clearImg' data-index="{{index}}" type="clear" size="20" color="red"/>
        <!-- 图片-->
        <image bindtap='showImg' data-index="{{index}}" src='{{item}}'></image>
    </view>
    <!-- 上传按钮+框 -->
    <view class='ui_uploader' bindtap='upload' wx:if="{{showUpload}}"></view>
</view>

js代码

//上传图片
		data: {
        	uploaderList: [],
        	tempFilePaths:null,
        	uploaderNum: 0,
        	showUpload: true,
        	fileUrlList: [],
     },
    upload: function(e) {
        var that = this;
        // 小程序自带方法，选择本地图片
        wx.chooseImage({
            count: 4 - that.data.uploaderNum, // 默认4
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function(res) {
                console.log(res)
                that.setData({
                    tempFilePaths:res.tempFilePaths[0]
                })
                // 获取上传策略
                axios({
                    url:'/file/getFileUploadPolicy',
                    method:'POST',
                    data:{
                        Token:wx.getStorageSync('token')
                    }
                }).then(res =>{
                    const data = res.data.data
                    // let timestamp = (new Date()).valueOf();  
                    // const fileName = that.data.tempFilePaths.substring(that.data.tempFilePaths.length - 20)
                    const  suffix = that.data.tempFilePaths.substring(that.data.tempFilePaths.length - 4) // 图片后缀名
                    const fileName = utils.randomTenNum(10) +suffix //文件名：十位随机数加后缀名（.jpg）
                    wx.uploadFile({ //上传到阿里云
                        url: data.host, 
                        filePath: tempFilePaths[0],
                        name: 'file',
                        formData: {
                            OSSAccessKeyId: data.accessid,
                            policy: data.policy,
                            signature: data.signature,
                            key: data.dir+'/'+fileName,
                            success_action_status:"200"
                          },
                        success (res){
                            that.data.fileUrlList.push(data.dir+'/'+fileName)
                            that.setData({
                                fileUrlList: that.data.fileUrlList
                            })
                        }
                      })
                })
                // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                let tempFilePaths = res.tempFilePaths;
                let uploaderList = that.data.uploaderList.concat(tempFilePaths);
                if (uploaderList.length==4){
                    that.setData({
                        showUpload:false
                    })
                }
                that.setData({
                    uploaderList: uploaderList,
                    uploaderNum: uploaderList.length,
                })
            }
        })
    },
        // 删除图片
    clearImg:function(e){
        const fileUrlList = this.data.fileUrlList
        const index = e.currentTarget.dataset.index
        fileUrlList[index] = ''
        this.setData({
            fileUrlList:fileUrlList
        })
        var nowList = [];//新数据
        var uploaderList = this.data.uploaderList;//原数据
        
        for (let i = 0; i < uploaderList.length;i++){
            if (i == e.currentTarget.dataset.index){
                continue;
            }else{
                nowList.push(uploaderList[i])
            }
        }
        this.setData({
            uploaderNum: this.data.uploaderNum - 1,
            uploaderList: nowList,
            showUpload: true
        })
    },
    //展示图片
    showImg:function(e){
        var that=this;
        wx.previewImage({
            urls: that.data.uploaderList,
            current: that.data.uploaderList[e.currentTarget.dataset.index]
        })
    }

css样式

.ui_uploader_cell {
  width: 100%;
  /* padding: 40rpx; */
  padding-top: 16rpx;
  box-sizing: border-box;
}
.ui_uploader_item{
  float: left;
  position: relative;
  margin-right: 30rpx;
  margin-bottom: 30rpx;
  width: 120rpx;
  height: 120rpx;
}
.ui_uploader {
  float: left;
  position: relative;
  margin-right: 25rpx;
  margin-bottom: 25rpx;
  width: 120rpx;
  height: 120rpx;
  border: 2rpx solid #d9d9d9;
  box-sizing: border-box;
}

.ui_uploader:before {
  content: " ";
  position: absolute;
  width: 4rpx;
  height: 79rpx;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #d9d9d9;
}

.ui_uploader:after {
  content: " ";
  position: absolute;
  height: 4rpx;
  width: 79rpx;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #d9d9d9;
}
.ui_uploader_item_icon{
  position: absolute;
  right: -20rpx;
  top: -20rpx;
  background: #fff;
  border-radius: 50%;
}
.ui_uploader_item image {
  width: 100%;
  height: 100%;
}