uniapp APP出现TypeError: Cannot read property ‘createElement‘ of undefined

问题描述

uniapp H5代码打包和运行都是没有问题的。打包成安卓app也是基本上没有问题的，当要用到第三方js时，会报一些undefined的相关错误

例如：我用 npm 引入阿里对象存储的 ali-oss插件会报 TypeError: Cannot read property 'createElement' of undefined

原因是：uniapp打包APP时没有DOM概念的，ali-oss使用到了DOM，所以会报错。

解决问题

查阅文档与资料，自己封装了一个单图片上传与视频上传并返回存储地址的js文件。

第一步：辅助函数；

// 添加文件名后缀方法，例如 .png
function getSuffix(filename) {
	let pos = filename.lastIndexOf('.');
	let suffix = '';
	if (pos != -1) {
		suffix = filename.substring(pos);
	}
	return suffix;
}
// 自定义文件夹（file）
function getFileName(file, filename) {
	return (
		file + Math.random()
		.toString(36)
		.substring(3, 20) + new Date().getTime() +
		getSuffix(filename)
	);
}

第二步：暴露出的图片上传函数；

// 选择上传图片
export function uploadImg(file) {
	return new Promise((resolve, reject) => {
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album', 'camera'], //从相册选择
			success: function(res) {
				let Imgsrc = res.tempFilePaths[0];// 第一张图片
				let fileName = getFileName(file, Imgsrc); // 自定义上传后的文件名称
				fileUpload("image", Imgsrc, fileName).then(res => { // 核心函数 请往下看
					resolve(res)
				}).catch(err => {
					reject(err)
				});
			}
		})
	})
}

第三步：文件上传核心函数；

// 文件上传
function fileUpload(type, path, stroeAs) {
	uni.showLoading({
		title: '文件上传中'
	});
	return new Promise((resolve, reject) => {
		uni.request({
			url: 'xxxxxxxxxxxxxxxxxxxxx', //向后端发送请求，获取签名地址以及相关信息。
			complete: res => {
				var data = res.data;
				uni.uploadFile({
					url: data.host, //后台返回的阿里云存储的上传地址
					filePath: path,
					fileType: type,
					name: 'file',
					formData: {
						key: stroeAs, //文件名
						policy: data.policy, //后台获取超时时间
						OSSAccessKeyId: data.accessid, //后台获取临时ID
						success_action_status: '200', //让服务端返回200,不然，默认会返回204
						signature: data.signature //后台获取签名
					},
					success: res => {
						uni.hideLoading();
						uni.showToast({
							title: '上传成功',
							icon: 'success',
							duration: 2000
						});
						resolve(data.host + stroeAs) // 返回保存在阿里oss上的地址
					},
					fail: err => {
						reject(err)
						uni.hideLoading();
						uni.showModal({
							content: err.errMsg,
							showCancel: false
						});
					}
				});
			}
		})
	});
}

第四步：暴露出的视频上传函数；

export function uploadVid(file) {
	return new Promise((resolve, reject) => {
		uni.chooseVideo({
			count: 1,
			sourceType: ['camera', 'album'],
			success: function(res) {
				let videoSrc = res.tempFilePath;
				if (res.size > 1024 * 1024 * 15) {
					uni.showToast({
						title: '文件大小超过系统上传限制：15M',
						icon: 'none',
						duration: 1000
					});
					return;
				}
				let fileName = getFileName("video", file, videoSrc);
				fileUpload("video",Imgsrc, fileName).then(res => {
					resolve(res)
				}).catch(err => {
					reject(err)
				});
			},
			fail: (err) => {
				reject(err)
				uni.showToast({
					title: '取消选择视频',
					icon: 'none',
					duration: 2000
				});
			}
		})
	})
}

文件下载地址：CSDN0积分下载 或者 uniapp插件市场下载

相关说明

参数	类型	说明
file	String	要存放的文件夹名；例如 …/imageList/
filename	Blob	被选中的图片或者视频文件名
type	String	image 或者 video
path	Blob	同filename被选中的本地图片或视频文件
stroeAs	String	自定义文件名；例如 …/imageList/xxxx.png

---

点赞 评论 收藏 ~~ 有疑惑的小伙伴，可能是我表达不清楚，可以留言讨论，如有错误，也希望大家不吝指出。 ~~ 点赞 评论 收藏