我用的是 uni.uploadFile 方法,前端负责上传图片,后端接收图片后进行压缩保存。(H5,安卓能正常使用)

这是页面样式,可直接粘贴使用

<view class="uploading_img">
    // 前端没显示图片的样式
    <view class="uploading_body" v-if="imglist.length == 0" @click="uploadingClick">
		<view class="uploading_body_one">+</view>
		<view class="uploading_body_two">
		    注:支持 ['png','jpg','jpeg','gif','bmp','ai','psd','cdr']
             格式文件,每张图片不超过10m,
		</view>
	</view>
    // 前端图片显示的样式
	<view v-for="(item, index) in imglist" :key="index" v-else>
		<view class="img_box_show">
			<image class="img" :src="item" mode="aspectFill"></image>
			<view class="img-delete" @click="imgDelete1" :data-delindex="index">x</view>
		</view>
	</view>
</view>
.uploading_img {
	margin: 20px auto;
	width: 90%;
	height: 220px;
	background: #ffffff;
	box-shadow: 0px 0px 4px 0px rgba(17, 17, 17, 0.37);
	border-radius: 6px 6px 6px 6px;
	.uploading_header {
		width: 100%;
		height: 30px;
		display: flex;
		align-items: center;
		border-bottom: 1px solid rgba(17, 17, 17, 0.3);
		.uploading_header_one {
			font-size: 16px;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #111111;
			margin-left: 10px;
		}
		.uploading_header_two {
			margin-left: 10px;
			font-size: 10px;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #666666;
		}
	}

	.uploading_body {
		width: 100%;
		height: 189px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		.uploading_body_one {
			width: 35px;
			height: 35px;
			background: #73bb2b;
			color: #ffffff;
			font-size: 24px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
		}
		.uploading_body_two {
			width: 85%;
			top: 63%;
			margin: 0 auto;
			position: absolute;
			font-size: 10px;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(17, 17, 17, 0.46);
		}
	}
	.img_box_show {
		width: 50%;
		height: 50%;
		margin: 40px auto;
		image {
			width: 100%;
			height: 100%;
		}
	}
}

点击选择图片

uploadingClick(){
    let that = this;
    uni.chooseImage({
		count: 1, // 最多可以选择的图片张数,默认9
		sizeType: ['compressed'], // original 原图,compressed 压缩图,默认二者都有
		sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
		success(res) {
			that.imglist = res.tempFilePaths;
		}
	});
}

点击上传

这个要看具体的业务要求了,如果需求是要上传图片加一些标题,那么就要在上传之前要先进行一步判断,如果只是单张上传的话就不用了。这里的话就不进行判断了

confirmClick(){
    let url = '这里是接口地址';
	let token = uni.getStorageSync('token');
	uni.uploadFile({
		url: url, //仅为示例,非真实的接口地址
		filePath: this.imglist[0],
		header: {
			authorization: 'Bearer ' + token
		},
        // 这个name是上传时后端要求图片的字段,如果后端要求要传数组类型的记得要加[0]
		name: 'works[0]',
        // 这个formData是这个图片的一些标题,也就是一些其他必传字段
		formData: {
			title: this.form.uploading_message,
			high: this.form.uploading_high,
			wide: this.form.uploading_wide,
			label: this.form.uploading_label,
			type_id: this.form.typeNId,
			color_mode_id: this.form.colorId,
			file_format_id: this.form.exId
		},
		success: uploadFileRes => {
			var res1 = JSON.parse(uploadFileRes.data);
			if (res1.code == 1) {
				this.form = {};
				this.imglist = [];
				uni.showToast({
					title: '上传成功',
					duration: 1000,
					icon: 'none'
				});
                // 这些是因为ui设计的页面需要跳转去选择一些内容
                // 所以我把一些字段都存储到本地,上传成功后清除
				let form = uni.getStorageSync('form');
				form.colorName = '';
				form.exName = '';
				form.uploading_high = '';
				form.typeName = '';
				form.uploading_label = '';
				form.uploading_message = '';
				form.uploading_wide = '';
				uni.setStorageSync('form', form);
			} else {
				uni.showToast({
				    title: res1.msg,
				    duration: 1000,
				    icon: 'none'
			    });
		    }
	    }
	});
}

这些代码可以直接粘贴复用的,只要改一些参数就可以的。如果大家能用的上请评论扣 1 !!!

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐