前端vue点击图片上传(带封装方法)

已于 2023-09-14 16:12:35 修改
阅读量1.1k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： vue html uniapp知识点 文章标签： 前端 vue.js javascript
于 2023-09-08 14:06:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_49714202/article/details/132758873
文章介绍了在Vue应用中使用uni-app进行图片上传、选择和管理的方法，包括直接操作、封装组件和实战示例，展示了如何使用`uni.chooseImage`、`uploadFile`以及组件化的开发方式来实现图片上传功能。

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

第一种

直接用，图片路径自己换一下

<template>
	<view class="uPImg">
		<view class="Img">上传照片 :</view>
		<view class="shangchuan">
			<view class="sc2" v-for="(item, index) in imgList" :key="index">
				<image class="del" @click="del(index)" src="../../../static/property/paymentUpload.png" mode="">
				</image>
				<image class="Img3" :src="item" mode=""></image>
			</view>
			<view class="sc2" v-if="imgList.length < 3" @click="upload">
				<image class="sc3" src="../../../static/property/paymentUpload.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			imgList: [],
		},
		methods {
			// 点击上传图片
			upload() {
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album'], //从相册选择
						loop: true,
						success: res => {
							console.log(res);
							if (res.tempFilePaths.length != 0) {
								this.imgList.push(res.tempFilePaths[0]);
							}
							console.log(JSON.stringify(res.tempFilePaths));
							var tempFilePaths = res.tempFilePaths;

							console.log(tempFilePaths);
							console.log(tempFilePaths[0]);
							uni.uploadFile({
								url: 'http://douzhuoqianshouba.xieenguoji.com/api/ajax/upload',
								filePath: tempFilePaths[0],
								name: 'file',
								success: uploadFileRes => {
									console.log('上传图片', JSON.parse(uploadFileRes.data));
								},
								fail(err) {
									console.log(err);
								}
							});
						}
					});
				},

				// // 删除图片
				del(index) {
					this.imgList.splice(index, 1);
					console.log(this.imgList);
				},
		}
	}
</script>

<style>
</style>

第二种封装方法

封装组件upload.vue

直接用，图片路径自己换一下

<template>
	<view></view>
</template>

<script>
export default {
	data() {
		return {
			/*需要返回的图片*/
			imageList:[]
		};
	},
	onLoad() {},
	props:['num'],
	mounted() {
		this.chooseImageFunc();
	},
	methods: {
		
		/*打开相机或者相册，选择图片*/
		chooseImageFunc() {
			let self=this;
			uni.chooseImage({
				count: self.$props.num || 9, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], //从相册选择
				success: function(res) {
					self.uploadFile(res.tempFilePaths);
				},
				fail:function(res){
					self.$emit('getImgs',null);
				},
				complete:function(res){
					
				}
			});
		},
		
		/*上传图片*/
		uploadFile: function(tempList) {
			let self = this;
			let i = 0;
			let img_length=tempList.length;
			let params = {
				token: uni.getStorageSync('token'),
                app_id: self.getAppId()
			};
			uni.showLoading({
			    title: '图片上传中'
			});
			tempList.forEach(function(filePath, fileKey) {
				uni.uploadFile({
					url: self.websiteUrl + '/index.php?s=/api/file.upload/image',
					filePath: filePath,
					name: 'iFile',
					formData: params,
					success: function(res) {
						let result = typeof res.data === 'object' ? res.data : JSON.parse(res.data);
						if (result.code === 1) {
							self.imageList.push(result.data);
						}else{
							self.showError(result.msg);
						}
					},
					complete: function() {
						i++;
						if (img_length === i) {
							uni.hideLoading();
							// 所有文件上传完成
							self.$emit('getImgs',self.imageList);
						}
					}
				});
			});
		}
	}
};
</script>

<style></style>

使用组件

引入上面upload.vue

<template>
	<view class=" payment_right">
		<!-- 	<image src="../../../static/property/paymentUpload.png" mode=""></image>
					<!-- 封装完整的上传图片start -->
		<view class="uploadBox d-s-e">
			<view class="item" v-for="(imgs,img_num) in images" :key="img_num" @click="deleteFunc(imgs)">
				<image :src="imgs.file_path || imgs" mode="aspectFit"></image>
			</view>
			<view class="item d-c-c d-stretch" v-if="images.length<1">
				<!-- 			<view class="upload-btn d-c-c d-c flex-1" @click="openUpload()">
								<image src="../../../static/property/paymentUpload.png"></image>
							</view> -->
				<view class="  flex-1" @click="openUpload()">
					<image width="100px" height="100px" src="../../../static/property/paymentUpload.png">
					</image>
				</view>
			</view>
		</view>
		<Upload v-if="isUpload" @getImgs="getImgsFunc"></Upload>
		<!-- 封装完整的上传图片end -->

	</view>
</template>

<script>
	import Upload from '@/components/upload/upload.vue';
	export default {
		components: {
			Upload,
		},
		data() {
			// 封装的完整的上传图片start
			images: [],
			isUpload: false,
			// 封装的完整的上传图片end
		},
		methods {
			// 封装的完整的上传图片start
			// 上传微信收款码 删除图片
			deleteFunc(e) {
					this.images.splice(e, 1);
				},
				/*获取图片*/
				getImgsFunc(e) {
					let self = this;
					self.isUpload = false;
					if (e && typeof(e) != 'undefined') {
						let this_length = self.images.length,
							upload_length = e.length;
						if (this_length + upload_length < 2) {
							self.images = self.images.concat(e);
						} else {
							let leng = 1 - this_length;
							for (let i = 0; i < leng; i++) {
								self.images.push(e[i]);
							}
						}
					}

					this.pay_image = e[0].file_path
					// console.log(e, '获取所有图片');
					console.log(e[0].file_path, '图片路径');

				},
				/*上传*/
				openUpload() {
					this.isUpload = true;
					// console.log('打开');
				},
				// 封装完整的上传图片end
		}
	}
</script>

<style lang="scss" scoped>
	.payment_right {
		// width: 440rpx;
		// height: 220rpx;

		.uploadBox .item {
			width: 220rpx;
			height: 220rpx;
		}
	}
</style>

第三种实战

图片

请添加图片描述

代码

<template>
	<view class="box">
		<!-- 图片上传 -->
		<view class="bindingBox">
			<view class=" payment_rightSSS">
				<view class="shangchuan">
					<view class="sc2" v-for="(item, index) in imgList" :key="index">
						<view @click="del(index)" class="dells">
						</view>
						<img class="shangchuan_img" :src="item" mode="aspectFit"></img>
					</view>
					<view class="sc2 gray6 imgUploads" v-if="imgList.length < 1" @click="getUpload">
						<image src="../../../../static/property/paymentUpload.png">
						</image>
					</view>
				</view>
			</view>
		</view>

		<div class="buttonBox">
			<view class="bindingModifyBtn" @click="getUpload">
				修改
			</view>
			<view class="bindingSubmitBtn" @click="bankSubmit">
				提交
			</view>
		</div>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				imgList: [],
			}
		},
		onShow() {},

		mounted() {},
		onLoad() {},
		methods: {
		// 打开相册
			getUpload() {
				let self = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					loop: true,
					success: function(res) {
						self.uploadFile(res.tempFilePaths);
						// console.log(res,'路径啊啊啊啊啊');
					},
				});
			},
			/*上传图片 */
			uploadFile: function(tempList) {
				let self = this;
				let i = 0;
				let img_length = tempList.length;
				let params = {
					token: uni.getStorageSync('token'),
					app_id: self.getAppId()
				};
				uni.showLoading({
					title: '图片上传中'
				});
				tempList.forEach(function(filePath, fileKey) {
					uni.uploadFile({
						url: self.websiteUrl + '/index.php?s=/api/file.upload/image',
						filePath: filePath,
						name: 'iFile',
						formData: params,
						success: function(res) {
							// let result = typeof res.data === 'object' ? res.data :
							// 	JSON.parse(res.data);
							// if (result.code === 1) {
							// 	self.imgList.push(result.data);
							// } else {
							// 	self.showError(result.msg);
							// }


							console.log(res);

							let list = JSON.parse(res.data);
							let filePath = list.data.file_path;

							// 图片赋值到里面
							// self.imgList.push(list.data.file_path);


							// uniapp图片上传判断一个数组长度空上传，不为空修改
							if (self.imgList.length == []) {
								self.imgList.push(list.data.file_path);
							} else if (self.imgList.length !== []) {
								self.imgList = [list.data.file_path]
							}


							// console.log(list.data.file_path, '路径路径路径路径');
							// console.log(self.imgList, 'datadataself.imgList数据');
						},
						complete: function() {
							i++;
							if (img_length === i) {
								uni.hideLoading();
								// 所有文件上传完成
								// self.$emit('getImgs', self.imgList);
								self.imgList
							}
						}
					});
				});
			},
			// // 删除图片
			del(index) {
				this.imgList.splice(index, 1);
				uni.removeStorageSync('file_path');
				// console.log(this.imgList);
			},

			// 提交修改调用接口上传图片参数
			bankSubmit() {

				let self = this;

				if (self.imgList == 0) {
					uni.showToast({
						title: '请上传微信收款码',
						duration: 2000,
						icon: 'none'
					});
					return;
				}


				uni.showModal({
					title: '提示',
					content: '您确定提交吗?',
					success: function(o) {

						if (o.confirm) {
							uni.showLoading({
								title: '正在处理'
							});
							self._post(
								'user.user/bindUserWithdrawData', {
									type: '1',
									// wx_code_pic:self.imgList
									wx_code_pic: self.imgList.join()
								},
								function(res) {
									uni.hideLoading();
									uni.showToast({
										title: '操作成功',
										duration: 2000,
										icon: 'success'
									});
									uni.setStorageSync('file_path', String(self.imgList));
									// 存本地
									// uni.setStorageSync('filePath', String(self.imgList));
								}
							);
						}
					}
				});
			}
		},

	}
</script>

<style lang="scss" scoped>
	.bindingBox {
		// display: flex;
		// flex-direction: column;
		// padding: 0 32rpx;
		// box-sizing: border-box;

		// display: flex;
		// justify-content: space-between;
		// align-items: center;
		// padding: 30rpx 20rpx;
		// box-sizing: border-box;
		// font-size: 30rpx;
		background-color: #FFFFFF;

		.payment_rightSSS {
			// .uploadBox .item {
			// 	width: 220rpx;
			// 	height: 220rpx;
			// }
			display: flex;
			justify-content: center;
			align-items: center;

			.shangchuan {
				width: 300rpx;
				height: 300rpx;

				// border: 1rpx solid red;
				.sc2 {
					position: relative;
					// border: 1rpx solid lightseagreen;

					.shangchuan_img {
						// width: 200rpx;
						width: 300rpx;
						height: 300rpx;
						position: relative;

						// left: 52rpx;
						z-index: 9;
					}

					.dells {
						position: absolute;
						width: 100%;
						height: 100%;
						// border: 1rpx solid red;
						z-index: 10;
					}
				}

				.imgUploads {
					width: 300rpx;
					height: 300rpx;

					img {
						width: 100%;
						height: 100%;
						border: 1rpx solid deeppink;
					}
				}
			}
		}
	}

	.buttonBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 32rpx;
		margin: 100rpx auto;

		.bindingModifyBtn {
			background-color: red;
			width: 160px;
			height: 48px;
			line-height: 48px;
			opacity: 1;
			border-radius: 8px;
			border: none;
			font-size: 14px;
			color: #FFFFFF;
			text-align: center;
		}

		.bindingSubmitBtn {
			background-color: red;
			width: 160px;
			height: 48px;
			line-height: 48px;
			opacity: 1;
			border-radius: 8px;
			border: none;
			font-size: 14px;
			color: #FFFFFF;
			text-align: center;
		}
	}
</style>
Vue使用el-upload文件(图片)上传
m0_51431448的博客
06-24 2万+
Vue使用element-ui图片上传
在 Vue 中实现点击普通按钮上传文件
来杯卡布奇诺的博客
07-18 2169
在 handleFileUpload 方法中,我们首先检查选中的文件是否符合允许的文件类型。只有在文件类型和大小都满足要求的情况下,才会继续构建 FormData 对象并发送上传请求。在这个示例中,我们在组件的 data 中添加了两个属性: allowedFileTypes 和 maxFileSize。在组件的 methods 中添加一个方法,用于处理文件选择事件。在该方法中,获取选中的文件,并使用 FormData 对象构建上传数据。将该输入框隐藏起来,并添加一个普通的按钮用于触发文件选择。
vue实现上传图片
aaa123aaasqw的博客
05-16 3307
【代码】vue实现上传图片。
VUE 图片上传-前端
11-20
vue上传图片，后台管理使用，带基本的样式，可根据自己的需求修改css，或js代码
用Vue来实现图片上传多种方式
weixin_33763244的博客
07-16 1468
项目中需要上传图片可谓是经常遇到的需求，本文将介绍 3 种不同的图片上传方式，在这总结分享一下，有什么建议或者意见，请大家踊跃提出来。 没有业务场景的功能都是耍流氓，那么我们先来模拟一个需要实现的业务场景。假设我们要做一个后台系统添加商品的页面，有一些商品名称、信息等字段，还有需要上传商品轮播图的需求。 我们就以Vue、Element-ui，封装组件为例子聊聊如何实现这个功能。其他框架或者不用...
Vue【前端】——上传图片
幸遇三杯酒好，况逢一朵花新
08-07 2052
&nbsp;&nbsp;&nbsp;&nbsp;今天小咸儿实践了使用Vue上传图片的功能，在经过多次的实践之后，终于实现了上传图片，开心之情不能言表。(^▽^) &nbsp;&nbsp;&nbsp;&nbsp;另外，还要说明一下Vue组件封装之强大，使上传图片方便很多。 &nbsp;&nbsp;&nbsp;&nbsp;主要讲述的还是前端如何向fastDFS上传图片以及在Vue的table中显示...
vue前端上传图片预览
qq_42655697的博客
03-17 388
前端上传图片在浏览器上预览，不调接口，刷新后图片就会没有 <div class="btn"> <button>上传背景图片<input id="fileToUpload" style="position: absolute; top: 0; bottom: 0; left: 0;right: 0; opacity: 0;" type="file" accept="image/jpg,image/png" name="fileToUpload" @c
[Vue]对图片上传组件的封装
01-20
在Vue.js框架中，开发一个图片上传组件是一个常见的需求，它可以提供用户友好的交互和对上传文件的有效控制。本文将详细解析如何封装一个名为`ImgUpload`的图片上传组件，并介绍其中涉及的关键知识点。 首先，组件...
vue3 ant-design-vue 封装上传图片组件
weixin_44565776的博客
05-22 1359
“vue3 封装上传图片组件;
使用Vue实现图片上传的三种方式
12-07
在Vue.js中实现图片上传是常见的前端功能，通常有多种方式可以实现这一需求。下面将详细介绍3种不同的图片上传方式。 1. **云储存服务**： - **七牛云** 和 **阿里云OSS（Object Storage Service）** 是常用的云...
vue上传图片功能实现
Claudia_c的博客
09-14 326
vue上传图片功能实现 HTML部分 <el-form-item label="上传图片：" prop="pictureUrl" class="aa"> <el-upload class="avatar-uploader uploadPics" action="#" ref="upload" :http-request="request
vue实现图片上传功能
12-28
本文实例为大家分享了vue实现图片上传功能的具体代码，供大家参考，具体内容如下 先看效果 图片上传使用vant组件库中的 van-uploader, 使用方法参考官网 vant组件库 下面看代码 UploadPicture.vue <template> <div class=content> <!-- 底部模块start --> <div class=bottom_bg> <p class=flexst>上传图片</p> <div class=upload_bg> <div v-for=(item, index) in this.remUploadI
vue上传图片（压缩、base64）
Tessa_zzl的博客
05-16 5302
vue上传图片（压缩、base64） <el-form-item label="产品图标："> <span v-if="firImg" class="spanImg"> <img v-if="firImg" :src="firImg" alt="" class="avatar limImg"> <input...
vue图片上传预览功能
热门推荐
luwenze的博客
12-03 1万+
效果图 html结构 &amp;lt;ul class=&quot;gallery-window-map&quot; style=&quot;flex-wrap:wrap;&quot;&amp;gt; &amp;lt;!--点击上传按钮--&amp;gt; &amp;lt;li class=&quot;house-pic-item&quot; v-if=&quot;!(!item.isNew
el-upload使用http-request实现图片上传，回显，放大效果
qq_44185357的博客
08-18 4397
在项目开发中，为了实现上传文件的功能，我们需要用到el-upload这个组件，为了实现回显放大效果，就要用到el-image这个组件了。官方文档中介绍了上传的两种方法，一个是使用action，其参数必须要上传的地址；另一个是http-request，该方法覆盖默认的上传行为，可以自定义上传的实现。下面阐述如何实现图片上传，回显，放大效果。通过以上介绍我们已经初步了解了el-upload的用法，下面我们来看图片上传回显放大的实现过程。上传图片有以下这些几种方式，开发者可以根据项目实际情况进行选择。
vue上传图片
weixin_62328829的博客
10-14 6476
vue后台管理项目经常会遇到表单中上传图片的需求，我们运用element中的upload就可以实现这个功能，效果如下。在使用upload之前建议大家去读一边upload的文档，知道每个属性都是干什么的，到这里就完成了图片上传的操作了。先看下后端给的接口文档。
在vue中上传图片
明思齐的博客
05-17 4907
🌸。
前端vue表单图片上传
最新发布
03-08
### Vue.js 表单图片上传实现方法 #### 准备工作 为了在 Vue.js 中实现表单图片上传，需先确保对 Vue.js 基础组件、数据绑定以及事件处理有一定理解[^1]。 #### 创建 Vue 实例并设置配置项 初始化一个新的 Vue ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值