微信小程序上传文件及图片（可以预览）

最近在写小程序项目，碰到了一个需求，需要用户可以上传各种类型的文件和图片，展示在页面上，并且点击还可以进行预览，就找了找微信小程序官网，写了一个例子，分享一下

直接看代码：

wxml:

 <view>
      // 上传按钮
     <button class="upload-btn" bindtap='uploadFile'>
         <image src="../../../images/icon-upload.png"></image>上传相关资料
     </button>
      // 展示
     <view class="flex enclosure" wx:for="{{fileArray}}" wx:key="index">
         <view class="flex" bindtap="previewFile" data-path="{{item.path}}">
            // 通过filter根据不同类型展示不同图片
             <image style="width:80rpx;height:80rpx;margin-right: 18rpx;" src= 
              {{filters.picture(item.name)}}"></image>
                // 文件名
             <text style="width: 400rpx;overflow:hidden;text-overflow:ellipsis;white-                                        
              space:nowrap; ">{{item.name}}</text>
         </view>
     </view>
 </view>

wxss:

// 样式大家可以自己写
.upload-btn {
    height: 84rpx;
    color: #5f9be7;
    font-size: 28rpx;
    background-color: rgba(95, 155, 231, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 16rpx 0 36rpx;
}

.upload-btn image {
    width: 34rpx;
    height: 34rpx;
    margin-right: 20rpx;
}

.flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #666;
}

.enclosure {
    margin-bottom: 40rpx;
}

js:

// 文件上传
        uploadFile() {
            wx.chooseMessageFile({
                count: 10,     //选择文件的数量
                type: 'all',   //选择文件的类型
                success: (res) => {
                    this.setData({
                        fileArray: this.data.fileArray.concat(res.tempFiles)
                    })
                }
            })
        },

// 预览附件
previewFile(e) {
var string = ''
string = e.currentTarget.dataset.path.substring(e.currentTarget.dataset.path.indexOf(".") + 1)
      if (string == 'png' || string == 'jpg' || string == 'gif' || string == 'jpeg') {
                // 图片预览
                var arr = []
                arr.push(e.currentTarget.dataset.path)
                wx.previewImage({
                    current: e.currentTarget.dataset.path,
                    urls: arr
                })
            } else {
                // 文件预览
                wx.openDocument({
                    fileType: string, // 文件类型
                    filePath: e.currentTarget.dataset.path, // 文件地址
                    success: function (res) {
                        console.log('成功')
                    },
                    fail: function (error) {
                        console.log("失败")
                    }
                })
            }
        },

有问题和建议欢迎大家留言