uni-app 上傳圖片並壓縮

<form>
<view class="cu-bar bg-white" style="border-top: 1upx solid #eee;">
	<view class="action">
		上傳圖片
	</view>
	<view class="action">
		{{imgList.length}}/3
	</view>
</view>
<view class="cu-form-group">
	<view class="grid col-3 grid-square flex-sub">
		<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
			<image :src="imgList[index]" mode="aspectFill"></image>
			<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
				<text class='cuIcon-close'></text>
			</view>
		</view>
		<view class="solids" @tap="ChooseImage" v-if="imgList.length<3">
			<text class='cuIcon-cameraadd'></text>
		</view>
	</view>
</view>
</form>
data:{ 
    imgList: []
},


ChooseImage() {
	let _self = this;
	let imgarr = [];
	uni.chooseImage({
		success: (chooseImageRes) => {
			const tempFilePaths = chooseImageRes.tempFilePaths;
			uni.uploadFile({
				url: _self._apiurl + "/app/goods/uppicture",
				filePath: tempFilePaths[0],
				name: 'file',   //file方式
				formData: {
					openid: _self.openid, //傳值
					token: _self.token
				},
				success: (uploadFileRes) => {
					console.log(uploadFileRes);
					let res = JSON.parse(uploadFileRes.data);
					imgarr.push(res.data)
					console.log(imgarr);
						if ( _self.imgList.length != 0) {
							 _self.imgList =  _self.imgList.concat(imgarr)
						} else {
							 _self.imgList = imgarr
						}
				}
			});
		}
	});
},
ViewImage(e) {
	uni.previewImage({
		urls: this.imgList,
		current: e.currentTarget.dataset.url
	});
},
DelImg(e) {
	uni.showModal({
		title: '刪除',
		content: '確定要刪除這張照片嗎?',
		cancelText: '取消',
		confirmText: '刪除',
		success: res => {
			if (res.confirm) {
				this.imgList.splice(e.currentTarget.dataset.index, 1)
			}
		}
	})
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章