欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)多張照片上傳功能

 更新時間:2024年03月25日 15:23:00   作者:code袁  
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)多張照片上傳功能,當服務器的狀態(tài)碼為200且圖片上傳完畢后將圖片的src轉(zhuǎn)化為Json字符串存在數(shù)組中以便將其添加到數(shù)據(jù)庫,本文通過實例代碼介紹的非常詳細,需要的朋友可以參考下

微信小程序?qū)崿F(xiàn)多張照片上傳

1.功能實現(xiàn)

當選擇圖片后,生成對象tempFilePaths文件路徑。在通過for循環(huán)依次的圖片的src上傳到服務器。當服務器的狀態(tài)碼為200且圖片上傳完畢后將圖片的src轉(zhuǎn)化為Json字符串存在數(shù)組中以便將其添加到數(shù)據(jù)庫

2.代碼實現(xiàn)

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)
        // 文件上傳的函數(shù),返回一個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)  //這就是判斷是不是最后一張已經(jīng)上傳了,用來返回,
                        }
                      } else {
                        reject('error')
                      }
                }
              })
          }
        })
        // 文件上傳的函數(shù),返回一個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,//最多選擇圖片數(shù)量
        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++) {//多個圖片的循環(huán)上傳
                wx.cloud.uploadFile({//上傳至微信云存儲
                    cloudPath: 'myImage/' + new Date().getTime() + "_" + Math.floor(Math.random() * 1000) + ".jpg",//使用時間戳加隨機數(shù)作為上傳至云端的圖片名稱
                    filePath: tempFilePaths[i],// 本地文件路徑
                    success: res => {
                        // 返回文件 ID
                        console.log("上傳成功", res.fileID)
                        that.setData({
                            images: res.fileID//獲取上傳云端的圖片在頁面上顯示
                        })
                        wx.showToast({
                            title: '上傳成功',
                        })
                    }
                })
            }
        }
    })
}

3.頁面展示

圖片的src在數(shù)據(jù)庫中是以字符串的形式存儲。當需要展示時我們只需要將字符串轉(zhuǎn)化為數(shù)組對象即可
原始數(shù)據(jù) “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
        })
       })

??寫在最后

??伙伴們,如果你已經(jīng)看到了這里,覺得這篇文章有幫助到你的話不妨點贊??或 Star ?支持一下哦!手動碼字,如有錯誤,歡迎在評論區(qū)指正??~

到此這篇關(guān)于微信小程序?qū)崿F(xiàn)多張照片上傳的文章就介紹到這了,更多相關(guān)小程序多張照片上傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 使用Dropzone.js上傳的示例代碼

    使用Dropzone.js上傳的示例代碼

    本篇文章主要介紹了使用Dropzone.js上傳的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-10-10
  • 最新評論