微信小程序上传文件及图片（可以预览）-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序上传文件及图片（可以预览）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

直接看代码：

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("失败")
                    }
                })
            }
        },

有问题和建议欢迎大家留言文章来源地址https://www.toymoban.com/news/detail-527135.html

到了这里，关于微信小程序上传文件及图片（可以预览）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！