uni-app 拍照或从相册上传图片

最新推荐文章于 2025-03-21 15:33:22 发布

未知街

最新推荐文章于 2025-03-21 15:33:22 发布

阅读量1.2w

点赞数 5

分类专栏： uni-app 文章标签： uni-app 图片上传

本文链接：https://blog.youkuaiyun.com/qq_36797286/article/details/100783689

版权

uni-app 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个小程序中实现图片上传功能的方法，详细展示了如何使用JavaSSM框架在后台进行图片接收和处理。文章包括了小程序前端的代码示例，以及Java后台的图片上传控制器代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后台使用的是Java SSM框架

<template>
	<view>
		<view class="cu-bar bg-white margin-top">
			<view class="action">
				图片上传
			</view>
			<view class="action">
				{{imgList.length}}/{{imgMaxNum}}
			</view>
		</view>
		<view class="cu-form-group">
			<view class="grid col-4 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<4">
					<text class='cuIcon-cameraadd'></text>
				</view>
			</view>
		</view>
		<view class="cu-form-group upload-btn">
			<button class="cu-btn block bg-blue margin-tb-sm lg">上传</button>
		</view>
	</view>
</template>

var _this = this;
export default {
	data() {
		return {
			imgList: [],
			imgMaxNum: 4
		}
	},
	onLoad() {

	},
	methods: {
		ChooseImage() {
			_this = this;
			uni.chooseImage({
				count: 4, //默认9
				sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['camera','album'], //从相机、相册选择
				success: (res) => {
					var tempFilePaths = res.tempFilePaths;
					if (_this.imgList.length+tempFilePaths.length > _this.imgMaxNum) {
						uni.showToast({
							title: '超过上传图片的最大数量',
							icon: 'none'
						})
					} else {
						if (_this.imgList.length != 0) {
							_this.imgList = _this.imgList.concat(res.tempFilePaths);
						} else {
							_this.imgList = res.tempFilePaths;
						}
						for (var i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: baseUrl + "uploadImgAPP.do",
								filePath: tempFilePaths[i],
								name: "file", // 一定要与后台@RequestParam("file") MultipartFile变量名一致
								success(res) {
									console.log(res);
								}
							});
						}
					}
				}
			});
		},
		ViewImage(e) {
			uni.previewImage({
				urls: this.imgList,
				current: e.currentTarget.dataset.url
			});
		},
		DelImg(e) {
			this.imgList.splice(e.currentTarget.dataset.index, 1)
		},
	}
}

@RequestMapping("uploadImgAPP")
public String uploadImgAPP(@RequestParam("file") MultipartFile file,HttpServletRequest request){
	String fileName = "";
	if (file != null && !file.isEmpty()) {
		try {
			String targetSrc = request.getServletContext().getRealPath("/")+"files";
			fileName = file.getOriginalFilename();
			fileName = fileName.substring(fileName.lastIndexOf("."));
			fileName = UUID.randomUUID().toString() + fileName;
			File targetDir = new File(targetSrc);
			if (!targetDir.exists()) {
				targetDir.mkdirs();
			}
			File targetFile = new File(targetSrc, fileName);
			if (targetFile.exists()) {
				targetFile.delete();
			}
			file.transferTo(targetFile);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
	return fileName;
}