uniapp 上传本地图片、以二进制流的方式上传-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp 上传本地图片、以二进制流的方式上传。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、上传本地图片

1.1 uni.chooseImage

uni.chooseImage(OBJECT)

从本地相册选择图片或使用相机拍照。

1.2 uni.uploadFile

uni.uploadFile(OBJECT)

将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data。
如页面通过 uni.chooseImage 等接口获取到一个本地资源的临时文件路径后，可通过此接口将本地资源上传到指定服务器。

代码：文章来源地址https://www.toymoban.com/news/detail-531640.html

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 接口的一些参数
		 */
		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转二进制流测试）
			let dataurl =
				'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC';
			let blob = this.dataURLtoBlob(dataurl);
			this.handleUploadFile('upload', blob)
		},
		/**
		 * Base64字符串转二进制流
		 * @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 接口的一些其他的参数
		 */
		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, '上传失败')
				}
			})
		}
	}
}

到了这里，关于uniapp 上传本地图片、以二进制流的方式上传的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！