博客

<template>
	<view class="submit">
		<u-form :model="form" ref="uForm">
			<view class="img">
				<image class="img_icon" v-if="imgSrc"
					:src="'http://123.56.158.68:8080/TF5000/imageFile/loadingImage?imageName='+ imgSrc"
					@click="onGetImg">
				</image>
				<view class="box" v-else @tap="onGetImgClick">
					+选取图片
				</view>
				<image @click="DelImg" class="close" src="../../static/image/shanchu.png" v-if="images">
				</image>
			</view>

		</u-form>
</template>
export default {
		data() {
			return {
				images: false,
				imgSrc: "",
			
			    }
            }
		},

	//选择图片
			onGetImgClick() {
				const that = this
				uni.chooseImage({
					count: 1, // 最多可以选择的图片张数，默认9
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					sourceType: ['album', 'camera'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
					success: function(res) {
						console.log('chooseImage-----》》》》》》》》', res);
						//判断图片格式
						let tempStr = res.tempFilePaths[0].split('.');
						let lowerStr = tempStr[1].toLowerCase();
						// if (lowerStr != 'png' && lowerStr !== 'jpg' && lowerStr !== 'jpeg') {
						// 	uni.showToast({
						// 		title: '请上传PNG、JPG、JPEG格式的图片',
						// 		icon: 'none',
						// 		duration: 3000
						// 	});
						// 	return;
						// }
						// console.log(res.tempFiles, 'beforre--------');
						if (res.tempFiles[0]['size'] > 20 * 1024 * 1024) {
							uni.showToast({
								title: '图片大小不能超过20M',
								icon: 'none',
								duration: 3000
							});
							return;
						}
						if (res.tempFiles[0]['size'] < 5 * 1024 * 1024) { //图片小于5M不压缩，大于5M压缩
							that.uploadImgFile(res.tempFilePaths[0], that)
						} else {
							uni.compressImage({
								src: res.tempFilePaths[0],
								quality: 80,
								success: res => {
									console.log(res, '=========res');
									that.uploadImgFile(res.tempFilePath, that)
								}
							})
						}
					}
				});
			},
			//上传图片
			uploadImgFile(filePath, that) {
				let token =
					'eyJhIjo2LCJlIjoxNjIzMzczNjAxMjQ4LCJzIjoiNTE1MjExMSIsInUiOjI5N31iZjI1NzliZGM5YWNmNmY5MjhjY2E1NzAzMTQ5ZGZiZjZjYzFkZmI2YzZiNGVhNTgxNjNmZDk1MDUyNzU1Mzc5';
				uni.uploadFile({
					url: 'http://123.56.158.68:8080/TF5000/files/uploadFiles',
					filePath: filePath,
					name: 'file',
					formData: {
						file: filePath
                        //如果是ios就不需要file直接写filePath就好，如果加上file的话iOS会上传失败
                        //filePath
					},
					header: {
						'token': token，
                        //如果是iOS的话需要加请求头，否则会上传失败
                        'Content-Type': 'multipart/form-data'
					},
					success: response => {
						let res = JSON.parse(response.data);
						console.log(res);
						if (res.success == true) {
							// that.showInfo = res.data
							console.log('请求成功_______________', res);
							this.images = true
							this.form.photo = res.fileNames
							this.imgSrc = this.form.photo
							console.log(this.form.photo)
							console.log(this.imgSrc)
							// // 调用下载接口
							// that.downloadImg();

						}
					},
					fail: err => {
						uni.hideLoading()
						console.log('请求失败_______________', err);
					}
				});
			},
//删除图片
			DelImg(i) {
				uni.showModal({
					title: '提示',
					content: '确定要删除照片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						console.log(res)
						if (res.confirm == true) {
							this.form.photo = ""
							this.imgSrc = ""
							this.images = false
						}
					}
				})
			},
			//预览图片
			onGetImg(e) {
				console.log(e)
				this.fileList.push('http://123.56.158.68:8080/TF5000/imageFile/loadingImage?imageName=' + this.imgSrc)
				console.log(this.fileList)
				uni.previewImage({
					urls: this.fileList,
				});
			},