微信小程序?qū)崿F(xiàn)云開發(fā)上傳文件、圖片功能
更新時(shí)間：2022年12月02日 09:49:55 作者：super--Yang
在使用小程序的過(guò)程中,在編輯個(gè)人資料時(shí),通常會(huì)面臨上傳頭像、上傳背景圖片的情況,而這個(gè)開發(fā)過(guò)程需要怎樣實(shí)現(xiàn)呢?這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)云開發(fā)上傳文件、圖片功能的相關(guān)資料,需要的朋友可以參考下
一、前言
今天的博客所實(shí)現(xiàn)的功能很簡(jiǎn)單，但是也很常用。
本文將這常用的代碼進(jìn)行了封裝，可以放入自己utils類中使用，加快開發(fā)速度。
實(shí)現(xiàn)的功能有兩個(gè)：
一、選擇微信聊天文件并上傳。
二、選擇本地相冊(cè)/拍攝圖片上傳。
當(dāng)然，看標(biāo)題就知道是基于云開發(fā)的環(huán)境之下實(shí)現(xiàn)的了。
話不多說(shuō)，進(jìn)入正文。
二、功能簡(jiǎn)介
1、選擇微信聊天記錄中的文件
有時(shí)候小程序的使用場(chǎng)景是需要用戶上傳手機(jī)的文件，特別是excel、word、PDF等類型的文件。如果選擇讓用戶從本地文件夾里面去找，顯然有點(diǎn)困難。當(dāng)然，不僅僅只能選擇文件，還可以選擇視頻、圖片類型。具體的可以看官方的開發(fā)文檔。
因此小程序提供了一個(gè)API（wx.chooseMessageFile()），可以讓用戶從聊天記錄中選擇文件并上傳。
這樣選擇文件就方便很多了，例如：可以在文件傳輸助手中選擇。
2、選擇本地相冊(cè)/拍照?qǐng)D片
選擇相冊(cè)圖片/拍攝圖片上傳這個(gè)功能就更加常用了。小程序提供實(shí)現(xiàn)的API是 wx.chooseImage()。
至于使用場(chǎng)景就不用多說(shuō)了，很多場(chǎng)景都需要實(shí)現(xiàn)這一功能。這里就不做過(guò)多介紹，直接塞文檔了。具體的介紹，同學(xué)們可以前往官方文檔查看。
3、上傳功能
前面說(shuō)了，本文將這幾個(gè)實(shí)現(xiàn)函數(shù)都進(jìn)行了封裝，因此選擇文件、選擇圖片、上傳三個(gè)功能是拆分出來(lái)的，降低了代碼的耦合性和復(fù)用性。
在云開發(fā)中，文件上傳的API與傳統(tǒng)服務(wù)器開發(fā)中的文件上傳API很像。
云開發(fā)：wx.cloud.uploadFile() API介紹文檔
服務(wù)器：wx.uploadFile()API介紹文檔
三、實(shí)現(xiàn)代碼
1、選擇聊天文件函數(shù)（js）
/**
* 從聊天記錄選擇文件
* @param {number} count 可選擇數(shù)量（1-100）
* @param {string} type 可選擇文件類型 all:全部類型 video: 僅視頻 image: 僅圖片 file: 除了視頻、圖片外的文件類型
*/
chooseMessageFile(count, type) {
return new Promise((resolve, reject) => {
wx.chooseMessageFile({
count: count,
type: type,
success(res) {
resolve(res)
},
fail(err) {
console.log("選擇文件錯(cuò)誤 =====>", err)
resolve(false)
}
})
})
},
2、選擇相冊(cè)函數(shù)（js)
/** 選擇圖片封裝函數(shù)
* @param count 照片數(shù)量
* @param sizeType 照片的質(zhì)量, 默認(rèn) ['original', 'compressed']
* @param sourceType 照片來(lái)源, 默認(rèn) ['album', 'camera']
*/
chooseImg(count, sizeType, sourceType) {
if (!count) count = 1
if (!sizeType) sizeType = ['original', 'compressed']
if (!sourceType) sourceType = ['album', 'camera']
return new Promise((resolve, reject) => {
wx.chooseImage({
count: count,
sizeType: sizeType,
sourceType: sourceType,
success(res) {
resolve(res)
},
fail(err) {
resolve(false)
console.error("===== 選取照片失敗 =====", err)
}
})
})
},
3、上傳文件函數(shù)（js）
/**
* 上傳文件封裝函數(shù), 文件名隨機(jī)性處理，由17位隨機(jī)字符+13位時(shí)間戳組成
* @param {string} filePath 要上傳圖片的臨時(shí)路徑
* @param {string} cloudPathPrefix 云數(shù)據(jù)庫(kù)存儲(chǔ)位置的文件路徑前綴
*/
upLoadFile(filePath, cloudPathPrefix) {
// 取隨機(jī)名
let str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
let randomStr = '';
for (let i = 17; i > 0; --i) {
randomStr += str[Math.floor(Math.random() * str.length)];
}
randomStr += new Date().getTime()
return new Promise((resolve, reject) => {
let suffix = /\.\w+$/.exec(filePath)[0] //正則表達(dá)式返回文件的擴(kuò)展名
let cloudPath = cloudPathPrefix + '/' + randomStr + suffix
wx.cloud.uploadFile({
cloudPath: cloudPath,
filePath: filePath,
success(res) {
resolve(res)
},
fail(err) {
resolve(false)
console.error("===== 上傳文件失敗 =====", err)
},
})
})
},
4、調(diào)用示例
4-1、云存儲(chǔ)新建文件夾
4-2、完整調(diào)用代碼
WXML代碼
<button type="primary" style="margin-top: 105rpx;" bindtap="uploadFileTap" data-type="file">上傳文件</button> <button type="primary" style="margin-top: 45rpx;" bindtap="uploadFileTap" data-type="img">上傳圖片</button>
JS代碼
// pages/uploadFile/uploadFile.js
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {},
/** 上傳按鈕點(diǎn)擊監(jiān)聽 */
async uploadFileTap(res) {
// 上傳類型
const type = res.currentTarget.dataset.type
let filePathObj = null
let filePathList = []
if (type == 'file') {
filePathObj = await this.chooseMessageFile(1, 'file')
if (!filePathObj) return
filePathList.push(filePathObj.tempFiles[0].path)
} else if (type == 'img') {
filePathObj = await this.chooseImg(2)
if (!filePathObj) return
filePathList = filePathObj.tempFilePaths
} else {
return
}
console.log("選擇文件信息 ====>", filePathObj)
let cloudPathList = []
for (let i = 0; i < filePathList.length; i++) {
const cloudPathObj = await this.upLoadFile(filePathList[i], 'file')
if (!cloudPathObj) {
continue
}
console.log(filePathList[i], "文件上傳成功=====>", cloudPathObj)
cloudPathList.push(cloudPathObj.fileID)
}
console.log("最終返回云文件ID列表 =====>", cloudPathList)
},
/**
* 從聊天記錄選擇文件
* @param {number} count 可選擇數(shù)量（1-100）
* @param {string} type 可選擇文件類型 all:全部類型 video: 僅視頻 image: 僅圖片 file: 除了視頻、圖片外的文件類型
*/
chooseMessageFile(count, type) {
return new Promise((resolve, reject) => {
wx.chooseMessageFile({
count: count,
type: type,
success(res) {
resolve(res)
},
fail(err) {
console.log("選擇文件錯(cuò)誤 =====>", err)
resolve(false)
}
})
})
},
/** 選擇圖片封裝函數(shù)
* @param count 照片數(shù)量
* @param sizeType 照片的質(zhì)量, 默認(rèn) ['original', 'compressed']
* @param sourceType 照片來(lái)源, 默認(rèn) ['album', 'camera']
*/
chooseImg(count, sizeType, sourceType) {
if (!count) count = 1
if (!sizeType) sizeType = ['original', 'compressed']
if (!sourceType) sourceType = ['album', 'camera']
return new Promise((resolve, reject) => {
wx.chooseImage({
count: count,
sizeType: sizeType,
sourceType: sourceType,
success(res) {
resolve(res)
},
fail(err) {
resolve(false)
console.error("===== 選取照片失敗 =====", err)
}
})
})
},
/**
* 上傳文件封裝函數(shù), 文件名隨機(jī)性處理，由17位隨機(jī)字符+13位時(shí)間戳組成
* @param {string} filePath 要上傳圖片的臨時(shí)路徑
* @param {string} cloudPathPrefix 云數(shù)據(jù)庫(kù)存儲(chǔ)文件路徑前綴
*/
upLoadFile(filePath, cloudPathPrefix) {
// 取隨機(jī)名
let str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
let randomStr = '';
for (let i = 17; i > 0; --i) {
randomStr += str[Math.floor(Math.random() * str.length)];
}
randomStr += new Date().getTime()
return new Promise((resolve, reject) => {
let suffix = /\.\w+$/.exec(filePath)[0] //正則表達(dá)式返回文件的擴(kuò)展名
let cloudPath = cloudPathPrefix + '/' + randomStr + suffix
wx.cloud.uploadFile({
cloudPath: cloudPath,
filePath: filePath,
success(res) {
resolve(res)
},
fail(err) {
resolve(false)
console.error("===== 上傳文件失敗 =====", err)
},
})
})
},
})
4-3、實(shí)現(xiàn)效果
上傳成功
將文件或圖片上傳成功后，會(huì)返回存儲(chǔ)文件的fileID鏈接。將這個(gè)鏈接以及相關(guān)的信息存入數(shù)據(jù)庫(kù)即可，當(dāng)需要讀取的時(shí)候，從數(shù)據(jù)庫(kù)讀取，并將鏈接賦值給Image即可將圖片顯示出來(lái)。
四、結(jié)語(yǔ)
實(shí)際開發(fā)中的其他邏輯就不寫了。需要同學(xué)們自己去考慮異常情況處理等問題啦。
到此這篇關(guān)于微信小程序?qū)崿F(xiàn)云開發(fā)上傳文件、圖片功能的文章就介紹到這了,更多相關(guān)微信小程序云開發(fā)上傳文件圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- 微信小程序?qū)崿F(xiàn)上傳照片代碼實(shí)例解析
- uni-app開發(fā)微信小程序之H5壓縮上傳圖片的問題詳解
- 微信小程序?qū)崿F(xiàn)多文件或者圖片上傳
- 微信小程序?qū)崿F(xiàn)上傳圖片
- 微信小程序圖片上傳組件實(shí)現(xiàn)圖片拖拽排序
- 微信小程序?qū)崿F(xiàn)上傳圖片的功能
- 微信小程序?qū)崿F(xiàn)上傳多張圖片、刪除圖片
- 微信小程序?qū)崿F(xiàn)同時(shí)上傳多張圖片
- 微信小程序?qū)崿F(xiàn)一張或多張圖片上傳（云開發(fā)）
- 微信小程序?qū)崿F(xiàn)文件、圖片上傳功能
- 微信小程序?qū)崿F(xiàn)多張照片上傳功能
相關(guān)文章
類似于yahoo郵箱登陸的提示效果，當(dāng)鼠標(biāo)聚焦到郵箱地址文本框時(shí)，文本框文字被清空2014-02-02
這篇文章主要為大家詳細(xì)介紹了js原生Ajax的封裝和原理，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要為大家詳細(xì)介紹了JS快速排序的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
uniapp調(diào)用手機(jī)相機(jī)進(jìn)行拍照的兩種方式
這篇文章主要給大家介紹了關(guān)于uniapp調(diào)用手機(jī)相機(jī)進(jìn)行拍照的兩種方式,在uniapp中有多種方式可以調(diào)用相機(jī)進(jìn)行拍照,文中介紹了兩種方法,需要的朋友可以參考下2023-09-09
使用webpack3.0配置webpack-dev-server教程
這篇文章主要介紹了使用webpack3.0配置webpack-dev-server教程，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
ES6解構(gòu)賦值(數(shù)組,對(duì)象,函數(shù))使用詳解
這篇文章主要介紹了ES6解構(gòu)賦值(數(shù)組,對(duì)象,函數(shù))使用詳解,JavaScript 中最常用的兩種數(shù)據(jù)結(jié)構(gòu)是 Object 和 Array，解構(gòu)操作對(duì)那些具有很多參數(shù)和默認(rèn)值等的函數(shù)也很奏效，本文通過(guò)實(shí)例代碼詳細(xì)講解需要的朋友可以參考下2022-11-11
Ionic如何實(shí)現(xiàn)下拉刷新與上拉加載功能
在日常項(xiàng)目開發(fā)中我們經(jīng)常見到下拉刷新上拉加載的功能，接下來(lái)通過(guò)本文給大家介紹ionic如何實(shí)現(xiàn)下拉刷新與上拉加載的相關(guān)資料,需要的朋友可以參考下2016-06-06
微信小程序網(wǎng)絡(luò)請(qǐng)求封裝示例
這篇文章主要介紹了微信小程序網(wǎng)絡(luò)請(qǐng)求封裝示例,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
基于JS代碼實(shí)現(xiàn)圖片在頁(yè)面中旋轉(zhuǎn)效果
這篇文章主要介紹了基于JS代碼實(shí)現(xiàn)圖片在頁(yè)面中旋轉(zhuǎn)效果 的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
中國(guó)這么大，要在一張小小地圖上畫上中國(guó)，那么就需要按一定的比例縮小。D3 可視化畫圖，也是如此。本文就來(lái)和大家聊聊D3中的比例尺的繪制與使用，感興趣的可以學(xué)習(xí)一下2022-11-11