微信小程式圖片/視訊直傳阿里雲伺服器OSS
第一步(需要由後臺提供介面,前端獲取一些必要引數)
oss: function(token) { var _this = this; wx.request({ url: kidUrl + 'JurisdictionOss/encryption', data: { token: token }, method: 'POST', header: { 'content-type': 'application/json' }, success: res => { if (res.statusCode == 200) { _this.setData({ accessid: res.data.accessid, policy: res.data.policy, signature: res.data.signature, uploadUrl: res.data.host, uploadUrlend: res.data.dir, expire: res.data.expire, }) } } }) },
第二步(獲取上傳的圖片的臨時路徑)
addPhoto: function(res) { var _this = this; wx.chooseImage({ sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖,預設二者都有 sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機,預設二者都有 success: function(res) { // 返回選定照片的本地檔案路徑列表,tempFilePath可以作為img標籤的src屬性顯示圖片 var tempFilePaths = res.tempFilePaths; _this.setData({ photoArr: tempFilePaths }) } }) },
第三步(圖片上傳阿里雲/伺服器)
//上傳照片(阿里雲) uploadAli: function(babyData, photoArr) { var _this = this; var uploadUrl = this.data.uploadUrl; var uploadUrlend = this.data.uploadUrlend; var photoArrLen = photoArr.length; wx.uploadFile({ url: uploadUrl, formData: babyData, name: 'file', filePath: photoArr[0], header: { 'content-type': 'multipart/form-data' }, success: res => { if (res.statusCode == 200) { //表示上傳成功(可以在阿里雲伺服器檢視上傳的圖片) } } }) }, //圖片上傳伺服器 uploadRq: function(imgData) { var _this = this; wx.request({ url: kidUrl + 'xxxx', data: imgData, method: 'POST', header: { 'content-type': 'application/json' }, success: res => { //成功後臺會給你返回阿里雲那邊的圖片地址 } }) },
第四步(點選上傳圖片的按鈕操作)
//釋出按鈕
release: function(e) {
var _this = this;
//獲取照片陣列
var photoArr = this.data.photoArr;
//獲取時間
var date = this.data.date;
var userToken = this.data.userToken;
//時間搓
var expire = this.data.expire;
//獲取當前時間搓
var expireNow = Date.parse(new Date()) / 1000;
//如果當前時間大於獲取的時間 則重新獲取oss;
if (expireNow > expire) {
//重新獲取oss
_this.oss(userToken);
expire = this.data.expire;
}
//傳給阿里雲的引數
var policy = this.data.policy;
var accessid = this.data.accessid;
var signature = this.data.signature;
var uploadUrlend = this.data.uploadUrlend;
//傳給阿里雲的引數-end
var newPhoto = '';
var photoArrsm = '';
//由於微信小程式生成的臨時路徑在上傳阿里雲的時候不需要上傳.所以需要對路徑進行處理,但是在手機端上傳和PC端上傳,圖片臨時路徑的字首不同,所以需要進行分別的處理
if (photoArr[0].indexOf('http://tmp/') != -1) {
photoArrsm = uploadUrlend + photoArr[0].replace('http://tmp/', "");
}
if (photoArr[0].indexOf('wxfile://') != -1) {
photoArrsm = uploadUrlend + photoArr[0].replace('wxfile://', "");
}
// 傳給伺服器的引數
var imgData = {
token: userToken,
descript: textareaTxt,
type: 1,
write_time: date,
babyid: babyid,
phtots_url: photoArrsm
}
_this.uploadRq(imgData)
var babyData = {
'Filename': '${filename}',
'name': 'photoArr[0]',
'key': uploadUrlend + '${filename}',
'policy': policy,
'OSSAccessKeyId': accessid,
'success_action_status': '200', //讓服務端返回200,不然,預設會返回204
'signature': signature
}
this.uploadAli(babyData, photoArr)
},
上傳流程:
選擇圖片-->獲取到圖片臨時路徑,將圖片臨時路徑存入data
點擊發布按鈕-->獲取oss引數
獲取oss引數成功-->執行上傳阿里雲
上傳阿里雲成功-->執行上傳伺服器
上傳伺服器成功-->結束整個上傳流程
由於為了方便大家瀏覽,沒有用函式回撥.
大家可以根據自己的需求,結合自己的場景,來進行函式回撥或者使用ES6的Promise方法.
上傳阿里雲過程中幾個容易忽視的坑: 圖片路徑處理/時間戳判斷
特別注意:
這裡官方文件給出的傳法是如上圖所示,但是在微信小程式中不知道什麼原因會導致無法上傳 報錯403,
於是我改了寫法,如下圖
用這樣的寫法是可以上傳成功的 /修改key的 ${filename} 名字,即是修改上傳的檔案的名稱
相關推薦
微信小程式圖片/視訊直傳阿里雲伺服器OSS
阿里雲官方文件:第一步(需要由後臺提供介面,前端獲取一些必要引數) oss: function(token) { var _this = this; wx.requ
微信小程式開發環境(阿里雲服務搭建+可執行的demo)
最近微信小程式異常火爆,很多人在學習,下面帶著大家搭建下微信小程式的除錯環境(client+server),並除錯一套demo原始碼(JavaScript和node.js基礎即可,微信推薦使用的語言,無前端程式設計基礎,去菜鳥教程簡單學習下 JavaScript,node
微信小程式https安全連結 阿里雲 ssl證書 部署
微信小程式介面該問只允許安全級https連結 下面我們介紹一下如何在阿里雲部署免費的安全證書 登入阿里雲 控制檯-》安全(雲盾)-》證書服務-》購買證書 第二步:購買證書 選中免費型DVSSL,點選購買付款然後一步步操作就OK了。買完後,再次回去證書服務,會看到一條
微信小程式例子——視訊播放cover-view遮蓋層顯示poster圖片不顯示和判斷行動網路
1. 主要內容總結一下微信小程式中的video元件在需要加poster的情況下有時會失效如何解決。該文還會介紹如何在行動網路的情況下利用cover-view實現顯示”您正在使用行動網路,繼續播放將消耗流量“的功能。有問題希望在部落格下面留言一起討論。2.主要程式碼。(1)
微信小程式中引入iconfont阿里巴巴向量圖示
1.訪問iconfont阿里巴巴向量圖示庫官網 2.搜尋自己想找的圖示(輸入拼音,中文或英文都可以) 3.把自己想找的圖示“新增入庫” 4.點選購物車,新增至專案(若無專案,可新建) 5.檢視線上連結 6.點選複製程式碼 7.在微信小
關於微信小程式圖片本地顯示真機測試上不能顯示的問題
廢話不多說直接入正題 圖片不能過大 圖片命名不能含有中文 圖片命名也不能有空格 圖片大小寫要區分 以介面或者連結形式的圖片開頭不能是大寫的HTTP結尾也不能是.PNG 上面就是我在今天碰到問題時在網上搜到的普遍解決方法 但如果問題還沒解決,怎麼辦呢?
mpvue寫微信小程式-圖片引入(一)
1、快速上手(http://mpvue.com/mpvue/quickstart/) 按官網給出流程,建立: 執行後,在微信工具檢視: 編輯器中檢視目錄結構: 為了執行的
微信小程式圖片拼接的時候底部留白的問題解決
原文連結:傳送門 1.給圖片包裹元素加屬性 position: relative;
5行程式碼實現微信小程式圖片上傳與騰訊免費5G儲存空間的使用
本文介紹瞭如何在微信小程式開發中使用騰訊官方提供的雲開發功能快速實現圖片的上傳與儲存,以及介紹雲開發的 5G 儲存空間的基本使用方法,這將大大提高微信小程式的開發效率,同時也是微信小程式系列教程的視訊版更新的文字版本摘要。 此文為 「60 節實戰課微信小程式開發視訊教程」 的第 51 小節
微信小程式圖片處理 image元件用法
image 圖片。 屬性名 型別 預設值 說明 最低版本 src String 圖片資源地址,支援雲檔案ID(2.2.3起) &nb
微信小程式圖片點選放大
WXML <view class='imgList'> <view class='imgList-li' wx:for='{{imgArr}}'> <image class='img' src='{{i
web端重構微信小程式 圖片上傳
注意 一般情況上傳照片有兩種方式: 本地圖片轉換成base64,然後通過普通的post請求傳送到服務端。 操作簡單,適合小圖,以及如果想相容低版本的ie沒辦法用此方法 使用 但微信小程式不支援base64格式上傳,使用的是小程式的apiwx.uploa
微信小程式圖片文字水平垂直居中對齊解決方案
我們知道常用的居中對齊方式有很多種例如: text-align:center; align-items:center; justify-content: center; margin: auto; #子容器在父容器中居中 但是在view中的文字對齊卻不能簡單的使用text-ali
微信小程式圖片縮放、移動
一波乾貨 .wxml <!--scale.wxml--> <view class="container"> <view class="tip"> <text>scroll-view子元素縮放</text&g
微信小程式 - 圖片懶載入
wxml <!-- 資料來源 --> <view class='item-{{index}}' wx:for="{{lazyData}}" wx:key="*this.src"> <image src='{{item.show?
微信小程式新增視訊video元件
小程式視訊元件video標籤 wxml <View>1.播放網路視訊</View> <view > <video style="width: 100%;height=400px;margin:1px
小程式怎麼新增模板訊息-微信小程式開發-視訊教程12
模板訊息就是固定格式的訊息, 你可以把訊息裡的部分內容, 替換成適合自己的內容。 微信小程式為我們彙總了幾十個行業, 幾百個模板訊息, 你可以選擇適合自己的模板訊息使用。 微信小程式新增模板訊息流程和方法 登入你的微信小程式後臺,依次選擇‘模板訊息/我的模
微信小程式圖片選擇、上傳到伺服器、預覽(PHP)實現例項
微信小程式圖片選擇、上傳到伺服器、預覽(PHP)實現例項 小程式實現選擇圖片、預覽圖片、上傳到開發者伺服器上 後臺使用的tp3.2 圖片上傳 請求時候的header參考時可以去掉(個人後臺驗證許可權使用) 小程式前端程式碼: <view class="se
微信小程式圖片等比縮放顯示正中間
這是小程式 image標籤的mode ,對圖片的縮放做的處理 縮放 scaleToFill 不保持縱橫比縮放圖片,使圖片的寬高完全拉伸至填滿 image 元素 縮放 aspectFit 保持縱橫比縮放圖片,使圖片的長邊能完全顯示出來。也就是說,可以完整地將圖
微信小程式 圖片絕對定位(背景圖片)
前言:在小程式中,有時需要用到背景圖片,但是如果使用background-image的話,就無法控制圖片的大小,background-image一般用於將圖片壓縮為1畫素的背景圖片,然後自動填充鋪滿。使用背景圖片的話,一般使用一些新的view層,如<image clas