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

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

<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)
			// 此处省略后续图片云存储地址存入数据库的相关代码
		})
	}
}

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

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

你可能感兴趣的:(#,uni-app,uni-app,uView,uniCloud)