微信小程序实现多张照片上传-Toy模板网

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

个人介绍

hello hello~ ，这里是 code袁~💖💖 ，欢迎大家点赞🥳🥳关注💥💥收藏🌹🌹🌹

🦁作者简介：一名喜欢分享和记录学习的在校大学生
💥个人主页：code袁
💥 个人QQ：2647996100
🐯 个人wechat：code8896

专栏导航

code袁系列专栏导航
1.毕业设计与课程设计：本专栏分享一些毕业设计的源码以及项目成果。🥰🥰🥰
2.微信小程序开发：本专栏从基础到入门的一系开发流程，并且分享了自己在开发中遇到的一系列问题。🤹🤹🤹
3.vue开发系列全程线路：本专栏分享自己的vue的学习历程。

非常期待和您一起在这个小小的互联网世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨

微信小程序实现多张照片异步上传,微信小程序开发,微信小程序,小程序,图片上传

1.功能实现

当选择图片后，生成对象tempFilePaths文件路径。在通过for循环依次的图片的src上传到服务器。当服务器的状态码为200且图片上传完毕后将图片的src转化为Json字符串存在数组中以便将其添加到数据库

2.代码实现

1.mp-uploader

<view class="page">
    <view class="page__bd">
        <mp-cells>
            <mp-cell>
                <mp-uploader select="{{selectFile}}" upload="{{uplaodFile}}" files="{{files}}" max-count="4" title="附件上传" tips="最多可上传4张照片"></mp-uploader>
            </mp-cell>
        </mp-cells>
    </view>
</view>

//data中
 this.setData({ 
            selectFile: this.selectFile.bind(this),
            uplaodFile: this.uplaodFile.bind(this)
        })

 uplaodFile(files) {
        console.log('upload files', files)
        console.log('upload files', files)
        // 文件上传的函数，返回一个promise
        return new Promise((resolve, reject) => {
          const tempFilePaths = files.tempFilePaths;
          //上传返回值
          const that = this;
          const object = {};
          for (var i = 0; i < tempFilePaths.length; i++) {
            let filePath = tempFilePaths[i]
            wx.uploadFile({
                filePath: filePath,
                name: 'file',
                url: 'http://localhost:3000/upload/upload',
                success: function(res){
                    console.log('444',res.statusCode)
                    if (res.statusCode=== 200 ) {
                        const url = JSON.parse(res.data).url
                        that.data.files.push(url)
                        if (that.data.files.length === tempFilePaths.length) {
                          object.urls = that.data.files;
                          resolve(object)  //这就是判断是不是最后一张已经上传了，用来返回，
                        }
                      } else {
                        reject('error')
                      }
                }
              })
          }
          
        })
        // 文件上传的函数，返回一个promise
    },

微信小程序实现多张照片异步上传,微信小程序开发,微信小程序,小程序,图片上传

2.chooseImage

<view>
<block wx:for="{{images}}" wx:for-item="src">
  <image  src="{{src}}"></image>           
</block>
<view bindtap="upload">上传</view>

upload(){
    let that = this;
    wx.chooseImage({//异步方法
        count: 9,//最多选择图片数量
        sizeType: ['original', 'compressed'],//选择的图片尺寸 原图，压缩图
        sourceType: ['album', 'camera'],//相册选图，相机拍照
        success(res) {
            //tempFilePaths可以作为图片标签src属性
            const tempFilePaths = res.tempFilePaths
            console.log("选择成功", res)

            for (let i = 0; i < tempFilePaths.length; i++) {//多个图片的循环上传
                wx.cloud.uploadFile({//上传至微信云存储
                    cloudPath: 'myImage/' + new Date().getTime() + "_" + Math.floor(Math.random() * 1000) + ".jpg",//使用时间戳加随机数作为上传至云端的图片名称
                    filePath: tempFilePaths[i],// 本地文件路径
                    success: res => {
                        // 返回文件 ID
                        console.log("上传成功", res.fileID)
                        that.setData({
                            images: res.fileID//获取上传云端的图片在页面上显示
                        })
                        wx.showToast({
                            title: '上传成功',
                        })
                    }
                })
            }

        }
    })
}

3.页面展示

图片的src在数据库中是以字符串的形式存储。当需要展示时我们只需要将字符串转化为数组对象即可
原始数据 “http://localhost:3000/images/17112466754606371.jpg”,“http://localhost:3000/images/17112466755133666.jpg”,“http://localhost:3000/images/17112466756494564.jpg”]

 getShare().then(res=>{
        const list=res.data
         list.forEach(obj => {
            console.log('8888',obj.img)
         const imgString = obj.img;
         const trimmedString = imgString.replace('["', '').replace('\"]', '');
         const imgArray = trimmedString.split('"\,\"');
         console.log('444',imgArray)
         obj.img = imgArray;
        })
        this.setData({
            shareList:list
        })
       })