上传单个图片

https://blog.csdn.net/qq_41792905/article/details/114358690?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2_{aggregatepage}first_rank_v2~rank_aggregation-3-114358690.pc_agg_rank_aggregation&utm_term=input%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87+vue&spm=1000.2123.3001.4430
注意，是封装组件使用。

子组件：
1、获取本地路径 并 请求接口，传给后台，得到网路路径。

父组件:
1、接收后端的网路路径



2、请求 “修改用户” 接口，保存修改。

简写demo：

<template>
	<div class="uploadPicClass">
		<ul class="img_container">
			<li @click="UploadImg()">
				<input ref="image" type="file" name="" id="" style="display: none" @change="handleSuccess" />
			</li>
		</ul>
	</div>
</template>

<script>
	import axios from "axios";
	import {
		Indicator
	} from "mint-ui";

	export default {
		data() {
			return {
				img_url: "", //显示的图片地址
			};
		},

		created() {},

		methods: {
			// 点击请求input的click()事件
			UploadImg() {
				this.$refs.image.click();
			},

			// 文件上传成功
			handleSuccess(e) {
				Indicator.open();
				const file = e.target.files[0];
				console.log(file)

				// 文件转化base64格式，用于页面预览（或调用接口上传图片，获取图片地址，再赋值
				var reader = new FileReader();
				reader.onload = (data) => {
					this.img_url = data.target.result; // 图片赋值
				};
				reader.readAsDataURL(file);
				e.target.value = ""; // ！！！重要 input上传图片，可以连续上传同一张图片

				// console.log('图片路径',file)  //将本地路径传给后端，后端会返回网络路径。
				let param = new FormData(); // 创建form对象
				param.append("file", file); // 通过append向form对象添加数据
				param.append("dir", "user"); // 添加form表单中其他数据
				console.log(param.get("file")); // FormData私有类对象，访问不到，可以通过get判断值是否传进去
				let config = {
					headers: {
						"Content-Type": "multipart/form-data"
					},
				};
				axios.post("http://api.xxx/xxx/v1/upload-pic", param, config)
					.then((res) => {
						if (res.data.code == 2000) {
							Indicator.close();
							this.$emit("uploadPicUrl", res.data.rspdata); //网络路径
						}
					});
			},
		},
	};
</script>

<style lang="less">
	.uploadPicClass {
		.img_container {
			height: auto;
			display: flex;
			list-style: none;
			padding: 0;
			margin: 0;
			flex-wrap: wrap;
		}

		.img_container li {
			width: 80px;
			height: 20px;
			border: 1px solid pink;
		}
	}
</style>

完整demo：

<template>
	<div class="wrap">
		<ul class="img_container">
			<li v-show="img_url" style="position: relative">
				<img class="show_img" :src="img_url" alt="" />
				<span class="repeat_img" @click="UploadImg()">
					<img style="width: 31px; height: 31px; margin: 24px 0 8px 0" src="../../public/image/userLogo.jpg"
						alt="" />
					<span style="font-size: 14px; line-height: 22px; color: white">修改图片</span>
				</span>
			</li>
			<li v-show="!img_url" @click="UploadImg()">
				<div class="img_upload">
					<img src="../../public/image/userLogo.jpg" alt="" />
					<div style="
              font-size: 14px;
              line-height: 22px;
              color: rgba(0, 0, 0, 0.5);
            ">
						上传图片
					</div>
					<div class="upload_info">只支持JPG/PNG文件，大小不超过1M</div>
					<input ref="image" type="file" name="" id="" style="display: none" @change="handleSuccess" />
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				img_url: "", //显示的图片地址
			};
		},

		created() {},

		methods: {
			// 点击请求input的click()事件
			UploadImg() {
				this.$refs.image.click();
			},

			// 文件上传成功
			handleSuccess(e) {
				const file = e.target.files[0];
				console.log(file)

				// 限制上传图片类型
				if (!/\.(jpg|jpeg|png|JPG|PNG)$/.test(e.target.value)) {
					this.$message({
						message: "图片类型要求：jpeg、jpg、png",
						type: "error",
					});
					return false;
				}

				// 图片大小不超过1M
				if (file.size / (1024 * 1024) > 1) {
					this.$message({
						message: "图片大小不超过1M",
						type: "error",
					});
					return false;
				}

				// 文件转化base64格式，用于页面预览（或调用接口上传图片，获取图片地址，再赋值
				var reader = new FileReader();
				reader.onload = (data) => {
					this.img_url = data.target.result; // 图片赋值
				};
				reader.readAsDataURL(file);
				e.target.value = ""; // ！！！重要 input上传图片，可以连续上传同一张图片
			},
		},
	};
</script>

<style>
	.wrap {
		padding: 30px;
	}

	.img_container {
		height: auto;
		display: flex;
		list-style: none;
		padding: 0;
		margin: 0;
		flex-wrap: wrap;
	}

	.img_container li {
		width: 330px;
		height: 141px;
		box-sizing: border-box;
		background: rgba(57, 114, 255, 0.1);
		border: 1px solid #3972ff;
		box-sizing: border-box;
		border-radius: 5px;
	}

	.img_container li>.show_img {
		width: 100%;
		height: 100%;
	}

	.img_upload {
		text-align: center;
		cursor: pointer;
	}

	.img_upload img {
		width: 31px;
		height: 31px;
		margin: 24px 0 8px 0;
	}

	.upload_info {
		font-size: 10px;
		line-height: 22px;
		color: rgba(0, 0, 0, 0.3);
	}

	.repeat_img {
		position: absolute;
		cursor: pointer;
		display: flex;
		flex-direction: column;
		align-items: center;
		left: 0;
		right: 0;
		top: 24px;
	}
</style>