當前位置:網站首頁>uniapp上傳圖片及組件傳值

uniapp上傳圖片及組件傳值

2022-01-27 13:38:53 前端大佬養成計劃

效果

在這裏插入圖片描述
這裏我還沒有做loading,所以會出現閃一下的效果,不影響的哈~
首先說明上面一個卡片是一個組件,自己封裝好的。

點擊事件

在這裏插入圖片描述
這裏是點擊上傳的事件

上傳的方法

uploadImg() {
    
				if (this.uploadLogo) {
    
					uni.chooseImage({
    
						count: 1, //默認9,數量
						sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖,默認二者都有
						sourceType: ['album'], //從相册選擇
						success: (res) => {
    
							wx.uploadFile({
    
								url: this.$apiUrl + '/fkmpUser/fkmpHeaderImage/' + this.myMingpian
									.openId,
								filePath: res.tempFilePaths[0],
								header: {
    
									'Content-Type': 'multipart/form-data',
								},
								name: 'file',
								success: (uploadFileRes) => {
    
									//這個uploadFileRes是個String類型,要轉對象的話需要JSON.parse一下
									var obj = JSON.parse(uploadFileRes.data);
									this.myMingpian.companyLogo = obj.url
									this.$emit('funcData', this.myMingpian);
									// this.$emit('funcText', this.logoText);
									this.$refs.uToast.show({
    
										title: '上傳成功',
										type: 'success',
									})
								}
							});
						}
					});
				}
			},

給父組件傳值

this.$emit('funcData', this.myMingpian);這裏就是將我們在這裏修改了的值,傳遞給父組件

接收值

<m-mingpian :background="true" @funcData="getEditData" :myMingpian="myData" :clickStop="false"
				:erweima="true" :logoText="myData.companyLogo?false:true" :uploadLogo="true"></m-mingpian>

通過myData拿到值

版權聲明
本文為[前端大佬養成計劃]所創,轉載請帶上原文鏈接,感謝
https://cht.chowdera.com/2022/01/202201271338527190.html