uniCloud + uView 上传图片(u-upload 组件的使用)

发布时间:2024年01月15日

在这里插入图片描述

<u-upload imageMode='aspectFit' height="250" :maxCount='1' :fileList="fileList" @afterRead="uploadOK" @delete="delPic">
</u-upload>
::v-deep .u-upload__button {
	width: 100% !important;
}

::v-deep .u-upload__wrap__preview__image {
	width: 100% !important;
}

::v-deep .u-upload__wrap__preview {
	width: 100% !important;
}
fileList: [],
uploadOK(e) {
	this.fileList = [e.file]
},
delPic() {
	this.fileList = []
},
save() {
	if (this.fileList && this.fileList.length > 0) {
		uniCloud.uploadFile({
		    // 将图片存入云存储中 blog 文件夹(没有会自动新建)中,名称为图片原名称
			cloudPath: 'blog/' + this.fileList[0].name,
			filePath: this.fileList[0].url,
			// 将 cloudPath 作为文件路径(可用于自定义文件夹)
			cloudPathAsRealPath: true
		}).then(async (res) => {
			console.log('图片在云存储里的路径为:', res.fileID)
			// 此处省略后续图片云存储地址存入数据库的相关代码
		})
	}
}

在这里插入图片描述

在这里插入图片描述

文章来源:https://blog.csdn.net/weixin_41192489/article/details/135597830
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。