1、上傳本地圖片
?1.1?uni.chooseImage
uni.chooseImage(OBJECT)
從本地相冊(cè)選擇圖片或使用相機(jī)拍照。
1.2?uni.uploadFile
uni.uploadFile(OBJECT)
將本地資源上傳到開發(fā)者服務(wù)器，客戶端發(fā)起一個(gè)?
POST?請(qǐng)求，其中?content-type?為?multipart/form-data。
如頁(yè)面通過(guò)?uni.chooseImage?等接口獲取到一個(gè)本地資源的臨時(shí)文件路徑后，可通過(guò)此接口將本地資源上傳到指定服務(wù)器。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-531640.html
代碼：?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-531640.html
export default {
methods: {
/**
* 從本地相冊(cè)選擇圖片
*/
handleChooseImage() {
uni.chooseImage({
count: 3,
sourceType: ['album'],
success: res => {
let filePath = res.tempFilePaths[0];
// 上傳圖片
this.handleUploadFile('/upload', filePath);
}
});
},
/**
* 上傳
* @param {String} url 接口地址
* @param {String} filePath 要上傳文件資源的路徑
* @param {Object} data 接口的一些參數(shù)
*/
handleUploadFile(url, filePath, data) {
uni.uploadFile({
url: url,
filePath,
header: {
"authorization": uni.getStorageSync('token')
},
formData: data,
success: (uploadFileRes) => {
console.log(uploadFileRes, '上傳成功')
},
fail: (res) => {
console.log(res, '上傳失敗')
}
})
}
}
}2、以二進(jìn)制流的方式上傳
export default {
methods: {
handleUpload() {
// 獲取二進(jìn)制流（暫時(shí)用base64轉(zhuǎn)二進(jìn)制流測(cè)試）
let dataurl =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC';
let blob = this.dataURLtoBlob(dataurl);
this.handleUploadFile('upload', blob)
},
/**
* Base64字符串轉(zhuǎn)二進(jìn)制流
* @param {String} dataurl Base64字符串(字符串包含Data URI scheme，例如：data:image/png;base64, )
*/
dataURLtoBlob(dataurl) {
var arr = dataurl.split(","),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime,
});
},
/**
* 上傳
* @param {String} url 接口地址
* @param {Object} file 二進(jìn)制流
* @param {Object} data 接口的一些其他的參數(shù)
*/
handleUploadFile(url, file, data) {
uni.uploadFile({
url: url,
file,
header: {
"authorization": uni.getStorageSync('token')
},
formData: data,
success: (uploadFileRes) => {
console.log(uploadFileRes, '上傳成功')
},
fail: (res) => {
console.log(res, '上傳失敗')
}
})
}
}
}到了這里，關(guān)于uniapp 上傳本地圖片、以二進(jìn)制流的方式上傳的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
