uniapp上傳本地圖片以及以二進制流的方式上傳

更新時間：2023年07月21日 10:07:45 作者：卿本無憂

這篇文章主要給大家介紹了關(guān)于uniapp上傳本地圖片以及以二進制流的方式上傳的相關(guān)資料,最近在自己寫一個uniapp的項目,剛好遇到了上傳圖片到服務(wù)器的功能,這里總結(jié)一下,需要的朋友可以參考下

1、上傳本地圖片

1.1 uni.chooseImage

uni.chooseImage(OBJECT)
從本地相冊選擇圖片或使用相機拍照。

1.2 uni.uploadFile

uni.uploadFile(OBJECT)
將本地資源上傳到開發(fā)者服務(wù)器，客戶端發(fā)起一個 POST 請求，其中 content-type 為 multipart/form-data。
如頁面通過 uni.chooseImage 等接口獲取到一個本地資源的臨時文件路徑后，可通過此接口將本地資源上傳到指定服務(wù)器。

代碼：

export default {
	methods: {
		/**
		 * 從本地相冊選擇圖片
		 */
		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、以二進制流的方式上傳

export default {
	methods: {
		handleUpload() {
			// 獲取二進制流（暫時用base64轉(zhuǎn)二進制流測試）
			let dataurl =
				'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC';
			let blob = this.dataURLtoBlob(dataurl);
			this.handleUploadFile('upload', blob)
		},
		/**
		 * Base64字符串轉(zhuǎ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 二進制流
		 * @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, '上傳失敗')
				}
			})
		}
	}
}