1. 程式人生 > >微信小程式上傳圖片怎麼限制大小

微信小程式上傳圖片怎麼限制大小

 最近有一個微信小程式的專案,要求是上傳多張圖片,數量不能超過3張 ,而且在php裡因為上傳圖片被設定了只能上傳2M,導致上傳不成功,所以我在前端  設定一個函式,用了微信api(wx.chooseImage)獲取圖片,如果圖片大於3張的情況彈出一個提示,不能繼續上傳圖片了,如果圖片大於2M的情況彈出一個提示,只能在上傳2M以下的圖片,

data:{
    img:[], //設定一個數組
}

add_img:function(){
    var that = this,
    img = that.data.img;
        if(img.length < 3){  //如果圖片數量小於3張,可以直接獲取圖片
            wx.chooseImage({
                count:1,     //預設9
                sizeType:['compressed'], //可以指定原圖還是壓縮圖,預設二者都有
                sourceType:['album','camera'],//可以指定來源相簿還是相機,預設二者都有
                success:function(res){
                    var tempFilesSize = res.tempFiles[0].size;  //獲取圖片的大小,單位B
                    if(tempFilesSize <= 2000000){   //圖片小於或者等於2M時 可以執行獲取圖片
                        var tempFilePaths = res.tempFilePaths[0]; //獲取圖片
                        that.data.img.push(tempFilePaths);   //新增到陣列
                        that.setData({
                            img:that.data.img
                        })
                    }else{    //圖片大於2M,彈出一個提示框
                        wx.showToast({
                            title:'上傳圖片不能大於2M!',  //標題
                            icon:'none'       //圖示 none不使用圖示,詳情看官方文件
                        })
                    }
                }
            })
        }else{  //大於三張時直接彈出一個提示框
             wx.showToast({
                 title:'上傳圖片不能大於3張!',
                 icon:'none'   
             })

        }

}

我用的是tempFiles裡的size判斷圖片大小

相關推薦

程式圖片怎麼限制大小

 最近有一個微信小程式的專案,要求是上傳多張圖片,數量不能超過3張 ,而且在php裡因為上傳圖片被設定了只能上傳2M,導致上傳不成功,所以我在前端  設定一個函式,用了微信api(wx.chooseImage)獲取圖片,如果圖片大於3張的情況彈出一個提示,不能繼續上傳圖片了,

程式圖片,視訊及預覽

wxml <!-- 圖片預覽 --> <view class='preview-warp' wx:if="{{urls}}"> <image src='{{urls}}' /> </view> <view class="prew_video"

程式 圖片至阿里雲OSS(支援多圖片

我們先講下為什麼要把圖片檔案上傳到雲伺服器呢, 有什麼好處呢? 1、能減輕我們自己伺服器的頻寬 如果一個程式裡有多處地方用到使用者上傳圖片等功能的話,建議還是放到阿里雲或者千牛雲等其他平臺上來儲存我們的圖片,可以給公司的伺服器減少很多壓力,磁碟儲存也就不會太大 2、提升使用者體驗感

程式圖片到7牛雲

封裝上傳的方法 uploadQiniu(a, b) { //上傳圖片的方法 let token = a; //後臺請求回來的token let tempFilePaths = b; // 圖片路徑 var that = this; wx.uploadFile({ url: 'h

程式圖片檔案 程式+Java

小程式程式碼: chooseImage(){ wx.chooseImage({ success: function (res) { var tempFilePaths = res.tempFilePaths wx.up

程式---圖片

xxx.wxml <button style="margin:30rpx;" bindtap="chooseimage">獲取圖片</button> <image src="{{tempFilePaths}}" mode="asp

程式 圖片視訊到阿里雲 附帶進度條

功能採用阿里雲PostObjectAPI進行上傳,優點:1,採用policy,Signature保證了賬號安全性 疑問:當在windows工具上開發沒有問題,但在手機上測試發現 --- 當上傳進度達到100還需要等好長時間才走到(success: res => )這一

程式圖片 語音至七牛雲

將本地資源上傳到伺服器。客戶端發起一個 HTTPS POST 請求,其中 content-type 為 multipart/form-data。 以上傳圖片為例 示例程式碼: wx.chooseImage({ success(res) { co

程式圖片功能(附後端程式碼)

幾乎每個程式都需要用到圖片,在小程式中我們可以通過image元件顯示圖片。 當然小程式也是可以上傳圖片的,微信小程式文件也寫的很清楚。 上傳圖片 首先選擇圖片 通過wx.chooseImage(OBJECT)實現 官方示例程式碼 ? 1 2

程式圖片(附後端程式碼)

幾乎每個程式都需要用到圖片。 在小程式中我們可以通過image元件顯示圖片。 當然小程式也是可以上傳圖片的,微信小程式文件也寫的很清楚。 上傳圖片 首先選擇圖片 通過wx.chooseImage(OBJECT)實現 官方示例程式碼

程式圖片到伺服器

這就讓我有點懵,不知道該不該寫上header~ 再看看程式碼,感覺沒有什麼問題,反正呼叫API來回來去都是那幾句話: wx.uploadFile({ url: 'url', filePath: that.data.ima

程式圖片到伺服器wx.uploadFile

專案中肯定會遇到上傳檔案到伺服器端,小程式提供了很有用的api wxml程式碼: <image mode='widthFix' src="{{imgUrl}}"></image> <view bindtap="getPhoto">上傳圖片</vie

程式圖片wx.chooseImage和wx.uploadFile

wxml: <view class="container"> <view class='photo-wrap'> <view class='photo-image-wrap photo-image-wrap

程式圖片到php伺服器

js程式碼如下 submitPhoto(){ var that = this; wx.uploadFile({ url: 'http://xxx.cn/upload.

七牛雲之程式圖片

業務流程 客戶端在上傳資源到七牛雲端儲存之前要先從業務伺服器獲取一個有效的上傳憑證,因此需要先後和兩個服務端打交道。 由此圖可知,我們要獲得雲連結,要配微信小程式前端、後臺。 這裡,我選用Java的Dynamic Web project作為後臺

程式圖片 後臺Java+spring接收

最近在做微信小程式圖片上傳,將程式碼上傳,造福後來人,廢話不多說,貼程式碼:微信小程式端 chooseImage(){ wx.chooseImage({ success: function (res) { var tempFilePath

程式 圖片,人臉識別

今天我們來說一下人臉識別怎麼實現,首先你要有一個可以就行人臉識別的伺服器,阿里雲百度雲都可以,這裡推薦使用百度雲,因為百度雲人臉識別的API介面全面升級到V3版本,並進行開放測試,意思就是說現在是免費的   ^_^。先來看一下人臉識別頁面我們來看一下wxml程式碼<ca

WebApi接收程式圖片(二進位制檔案流)並儲存在伺服器指定路徑

找了好多天都沒找到小程式批量上傳圖片的方法,然後我現在的邏輯是: 取到上傳圖片的集合,迴圈呼叫小程式wx.UploadFile方法,依次上傳 後端取到檔案之後生成唯一MD5碼(相同的檔案生成的MD5碼是唯一的),然後取前兩位後兩位建立資料夾,儲存圖片前判斷下圖片是否存在。(

程式 —— 檔案到伺服器(例:圖片到伺服器)

上傳圖片到伺服器: 1.先在前端寫一個選擇圖片的區域來觸發wx.chooseImage介面並用wx.setStorage介面把圖片路徑存起來。 -wxml <view class="

程式多張圖片

開發微信小程式應用中有個需求就是客戶評價和下工單,這裡都會用到上傳多張圖,在之前寫的一篇部落格關於微信小程式上傳多張圖線下測試還可應用但是線上不可以,查詢原因是因為執行緒的原因所以會用到遞迴的方法解決。 首先在app.js 中定義一個方法 uploadimg:func