小程式上傳圖片到阿里雲oss
首先到阿里雲下載文件示例
https://help.aliyun.com/document_detail/31925.html?spm=a2c4g.11186623.6.634.CwkAvp,解壓后里面有個upload.js檔案,編輯這個檔案,把accessid、accesskey、host換成自己的,由於小程式只接受https,所以host最好是繫結自己的域名,且實用了https,然後找到new_multipart_params,使用log列印出來,接下來執行一遍index.html,上傳圖片後會列印出我們需要的東西
接下來就小程式上傳了,使用
chooseImage和uploadFile
uploadImage: function () {
var that = this
wx.chooseImage({
count: 3, // 預設9
sizeType: ['original'], // 可以指定是原圖還是壓縮圖,預設二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機,預設二者都有
success: function (res) {
// 返回選定照片的本地檔案路徑列表,tempFilePath可以作為img標籤的src屬性顯示圖片
var tempFilePaths = res.tempFilePaths
var myDate = new Date()
var ossPath = 'seekings/' + myDate.getFullYear()
for (var i = 0; i < tempFilePaths.length; i++) {
// 獲取檔案字尾
var pathArr = tempFilePaths[i].split('.')
// 隨機生成檔名稱
var fileRandName = Date.now() + "" + parseInt(Math.random() * 1000)
var fileName = fileRandName + '.' + pathArr[3]
// 要提交的key
var fileKey = ossPath + '/' + fileName
wx.uploadFile({
url: 'https://xxx.xxx.com',
filePath: tempFilePaths[i],
name: 'file',
formData: {
name: tempFilePaths[i],
key: fileKey,
policy: 'xxxxxxxxxx',
OSSAccessKeyId: 'xxxxxxx',
signature: 'xxxxxx',
success_action_status: "200"
},
success: function (res) {
var data = res.data
console.log(res)
}
})
}
that.setData({
upliadImages: res.tempFilePaths
})
}
})
},
相關文章
- Android圖片上傳到阿里雲OSS小案例Android阿里
- Flutter 上傳圖片到阿里雲OSSFlutter阿里
- vue 圖片上傳到阿里雲ossVue阿里
- 微信小程式開發:上傳網路圖片到阿里雲oss微信小程式阿里
- 圖片裁剪並上傳到阿里雲oss阿里
- 前端使用 JS 上傳圖片至阿里雲 ali-oss前端JS阿里
- 【故障公告】阿里雲OSS故障造成圖片無法上傳阿里
- 小程式開發:上傳圖片到騰訊雲
- uniapp小程式上傳圖片到騰訊雲APP
- 微信小程式 圖片上傳微信小程式
- 阿里雲 oss 檔案上傳 小坑阿里
- 微信小程式裡如何用阿里雲上傳視訊圖片微信小程式阿里
- ueditor jsp版上傳圖片到阿里雲JS阿里
- vue 上傳圖片到阿里雲(前端直傳:不推薦)Vue阿里前端
- Retrofit+RxJava上傳圖片上傳圖片到後臺RxJava
- 前端(react)上傳到阿里雲OSS儲存 例項前端React阿里
- 微信小程式上傳圖片至七牛微信小程式
- android 阿里雲oss上傳Android阿里
- jquery阿里雲oss 分片上傳jQuery阿里
- ionic3 上傳圖片、壓縮圖片到阿里雲 服務端簽名後直傳阿里服務端
- 小程式踩坑記錄-上傳圖片及canvas裁剪圖片後上傳至伺服器Canvas伺服器
- 阿里雲CDN+OSS完成圖片加速阿里
- 微信小程式簡單封裝圖片上傳元件微信小程式封裝元件
- Uniapp開發微信小程式+Node ---- 圖片上傳APP微信小程式
- 百度編輯器 ueditor 上傳圖片影片到阿里 Oss 或其他雲 PHP阿里PHP
- 微信小程式開發:迴圈定時刪除阿里雲oss上傳的檔案微信小程式阿里
- 微信小程式[第十一篇] -- 新增照片(小程式圖片上傳功能)微信小程式
- java,springboot + thymeleaf 上傳圖片、刪除圖片到伺服器、本地,壓縮圖片上傳(有些圖片會失真),原圖上傳JavaSpring Boot伺服器
- Laravel 上傳圖片到七牛雲Laravel
- Retrofit2.0:上傳圖片到PHPPHP
- 百度編輯器 ueditor 上傳圖片視訊到阿里 Oss 或其他雲 PHP阿里PHP
- flutter直接上傳檔案到阿里雲ossFlutter阿里
- 阿里雲 OSS 簽名上傳(結合 elementUI)阿里UI
- base64 編碼轉圖片儲存本地和上傳 oss
- windows下使用mysqldump備份資料庫並上傳到阿里雲OSSWindowsMySql資料庫阿里
- [封裝] 小程式直連 oss 上傳檔案JS類封裝JS
- ASP上傳圖片程式碼例子
- 微信小程式-拍照或選擇圖片並上傳檔案微信小程式