Vue封装自定义组件上传图片，并支持v-model语法

最新推荐文章于 2024-06-21 11:28:59 发布
最新推荐文章于 2024-06-21 11:28:59 发布
阅读量1.1k 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZkD953/article/details/110135575
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no" />
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/vconsole.min.js"></script>
		<style>
			.mgt15{
				margin-top: 15px;
			}
			.imageBox{
				display: flex;
				flex-wrap: wrap;
			}
			.itemBox{
				position: relative;
				width: 80px;
				height: 80px;
				margin:0 8px 8px 0;
			}
			.itemDel{
				position: absolute;
				top: 0;
				right: 0;
				z-index: 9;
				color: red;
			}
			.itemImage{
				width: 80px;
				height: 80px;
				object-fit: cover;
			}
			.textarea{
				width: 100%;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<form action="">
				<div class="mgt15">
					<upload v-model="formData.file1"></upload>
				</div>
				<div class="mgt15">
					<upload max="3" v-model="formData.file2"></upload>
				</div>
				<div class="mgt15">
					<button type="button" @click="formSubmit">提交表单</button>
				</div>
				<div class="mgt15" v-if="formDataStr">
					<textarea class="textarea" v-model="formDataStr"></textarea>
				</div>
			</form>
		</div>
		<script type="text/javascript">
			var vConsole = new VConsole();
			//定义组件
			Vue.component('upload', {
				template: `
				<div>
					<div class="imageBox">
						<div class="itemBox" v-for="(item,index) in showImage">
							<button class="itemDel" type="button" @click="imageDel(index)">删除</button>
							<img class="itemImage" :src="item" />
						</div>
						<div class="itemBox" v-if="loading">上传中...</div>
					</div>
					<input v-if="visible" type="file" @change="fileChange" />
				</div>`,
				model: {
					prop: 'value',
					event: 'change'
				},
				props: {
					value: [String, Array], //指定value值的类型
					max: {
						type: Number,
						default: 1 //默认最多上传一张
					}
				},
				data() {
					return {
						tempValue: [], //暂存
						loading: false, //表示是否正在上传文件
					}
				},
				computed: {
					visible() {
						if (this.loading) {
							return false;
						}
						if (!this.value) {
							return true;
						}
						return this.value.length < this.max
					},
					/**
					 * 格式化图片路径
					 */
					showImage() {
						var tempValue = this.tempValue;
						//在这里进行类型的转换，解决 "1.jpg,2.jpg"
						var fttValue = [];
						for (var i = 0; i < tempValue.length; i++) {
							//一般数据库只是存放相对路径，给文件添加文件服务器前缀，这一步视情况而定
							fttValue.push("https://api.jiuwusan.cn" + tempValue[i]);
						}
						return fttValue;
					}
				},
				watch: {
					value: function(newVal, oldVal) {
						console.log("更新 ：");
						this.setInitValue(newVal);
					}
				},
				created: function() {
					console.log("创建 ：", this.value);
					this.setInitValue(this.value);
				},
				methods: {
					/**
					 * 监听input的变化，进行图片上传
					 * @param {Object} e
					 */
					fileChange(e) {
						var that = this;
						that.loading = true;
						upload(e.target.files, function(res) {
							that.loading = false;
							if (res.code == 200) {
								// var value = JSON.parse(JSON.stringify(that.value || []));
								that.tempValue.push(res.path);
								this.$emit('change', that.tempValue);
							}
						});
					},
					/**
					 * 对初始值进行格式化
					 * @param {Object} value
					 */
					setInitValue(value) {
						if (!value) {
							this.value = [];
							return;
						}
						//在这里进行类型的转换
						if (Object.prototype.toString.call(value) != '[object Array]') {
							value = value.split(",");
						}
						this.value = value;
						this.tempValue = value;
						this.$emit('change', this.value);
					},
					imageDel(index) {
						console.log("删除===", index);
						this.tempValue.splice(index, 1);
						this.$emit('change', this.tempValue);
					}
				}
			})
			// 创建实例
			var app = new Vue({
				el: '#app',
				data() {
					return {
						formData: {
							file1: "",
							file2: []
						},
						formDataStr: ""
					}
				},
				computed: {},
				methods: {
					formSubmit() {
						console.log("提交了表单===", this.formData);
						this.formDataStr = JSON.stringify(this.formData);
					}
				}
			});

			/**
			 * 文件上传的方法
			 * @param {Object} files
			 * @param {Object} callback
			 */
			var upload = function(files, callback) {
				if (!files) {
					console.log("未选择文件");
					return;
				}

				var formData = new FormData();
				formData.append("file", files[0]);

				var xhr = new XMLHttpRequest();
				xhr.onreadystatechange = function() {
					if (xhr.readyState === 4 && xhr.status === 200) {
						var rsJson = xhr.responseText;
						if (callback != undefined && Object.prototype.toString.call(callback) === '[object Function]') {
							try {
								var parseJSON = JSON.parse(rsJson);
								callback(parseJSON);
							} catch (e) {
								// callback({
								// 	code: -99
								// });
							}

						}
					}
				};

				xhr.open("POST", "https://api.jiuwusan.cn/common/upload/img");
				xhr.send(formData);
			};
		</script>
	</body>
</html>

点击运行，查看运行效果

为了方便修改、复用，样式比较简单。

 

 

 

骑蜗牛de刘皇shu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中el-upload上传图片到七牛的示例代码
12-29
一、思路，从后台获取七牛token，上传图片到七牛，获取返回图片路径放入el-upload。 二、代码。 <el v-model=listVideoQuery.orgLogo change=orgLogoChange></el> <el span=10 class=mt10> <el-upload class=upload-demo :file-list=fileList2 :action=domain :before-upload=beforeAvatarUpload :data=form :on-remo
利用Vue v-model实现一个自定义的表单组件
08-30
本篇文章介绍了Vue v-model的使用，自定义表单组件的实现，Vue组件的生命周期，Vue组件的注册，Vue模板的使用，stylus的使用，组件间的通信，Vue CLI的使用，自定义组件的设计等知识点，对于开发者来说非常有用。
vue3双向绑定v-model封装图片文件上传组件。
qq_42704945的博客
07-26 3722
使用Vue3框架封装一个简单并且功能强大的文件上传组件。这个组件将为你提供一种方便的方式来上传文件，并且能够与其他组件实现数据的双向绑定。封装组件一个是方便一个是数据的双向绑定，这一点也是vue的核心，之前vue2使用value然后子组件使用emit(‘input’)方式，或者使用async的方法子组件用emit(‘update:prop’)方法。这个组件将帮助你实现文件的上传功能，并且能够与其他组件进行数据的双向绑定，使你能够轻松地处理上传的文件信息。
element-plus Upload组件加了v-model属性导致本地图片能回显，在服务器上图片不能回显问题
最新发布
guilinfeng的博客
06-21 194
element-plus Upload组件加了v-model属性导致本地图片能回显，在服务器上图片不能回显问题
封装uview-plus上传组件up-upload，支持v-model绑定
applebomb的专栏
06-01 542
vue上传组件拿到了一般无法直接使用，需要对其上下传的接口按照业务进行处理及定制。本次拿到的uview-plus也是一样，对其上传组件up-upload进行封装，令其更方便开发
vue v-model接收组件内 type=“file“ @input传递文件
舜岳的博客
07-13 2835
vue v-model接收子组件 type=“file” @input传递文件： //使用组件时 接收的文件存在form.file中 <FormFile v-model="form.file" /> //组件内 //注意里面不可添加:value="value" <input type="file" @input="$emit('input', $event.target.files[0])"> ...
Vue中V-model绑定控件表单
weixin_58473601的博客
04-09 1471
Vue中V-model绑定控件表单
Vue v-model组件封装(类似弹窗组件)
10-15
然而，Vue 也允许开发者将 `v-model` 应用于自定义组件，以实现更复杂的交互。 在标准的 `v-model` 使用中，`v-model` 的默认行为是将值绑定到 `value` 属性，并监听 `input` 事件来更新数据。在自定义组件中，我们...
详解vue v-model
01-21
vue中v-model是一个语法糖，所谓的语法糖就是对其他基础功能的二次封装而产生的功能。简单点说，v-model本身就是父组件对子组件状态以及状态改变事件的封装。其实现原理上分为两个部分： 通过props设置子组件的状态 ...
v-markdown-editor：Vue.js Markdown编辑器组件
02-04
1. **Vue.js Wrapper**：`v-markdown-editor`将CodeMirror封装成一个Vue组件，使开发者能够利用Vue的数据绑定和生命周期管理来轻松控制Markdown编辑器的行为。 2. **Markdown支持**：支持标准Markdown语法，允许用户...
上传文件 上传图片
fkkkkkf的博客
10-02 1122
上传文件/图片
Vue中v-model的简单使用
weixin_47450807的博客
10-26 1040
在Vue中v-model可以实现双向绑定，最直接的例子就是和表单进行绑定，在接下来的例子都会将v-model和表单进行联系。 什么是双向绑定？双向绑定就是当表单中的数据进行修改，其data中的数据要进行修改，当data中的数据进行修改，标签中的数据也进行了修改。这样了就是双向绑定。 例子1、 <body> <div id="app"> <input type="text" v-model="message"> <h3>{{message}}
自定义上传文件"组件"
Depthslowly的博客
06-03 260
前端： 注意顺序不要变哈 <Component> <input type="hidden" id="image" name="image"> <img style="width: 40%;display: block" class="imagePreview" src="{{asset("assets/img/no_image.png")}}"...
vue实现自定义文件上传组件
qq_43548154的博客
05-06 1643
思路： 实现input标签的change事件,我们在其中获取用户选中的文件（可以多个），将用户的文件信息赋值给我们事先在vue对象定义的data的files(数组)属性，用插值表达式把data的files属性显示到页面。 html部分(写在template里面，注意只能有一个根节点) <div class="fileContainer" > //选择文件的框 &l...
vue通过el-upload 实现单、多文件上传
weixin_45889291的博客
09-26 3654
vue通过el-upload ，formData实现单、多文件上传，附上源码及常见问题
vue el-upload上传图片组件使用
weixin_59525879的博客
08-04 1336
【代码】vue el-upload上传图片组件使用。
vue中form组件中上传el-upload（单、多附件上传，以及上传回显以及编辑不出现等问题）
weixin_46565787的博客
12-15 4459
看到了网上有很多的相关帖子，关于el-upload使用的说明，但总感觉有点散落，特此详细说明相关的使用，如有异议，希望海涵： 如下所示，首先在form组件中使用； <el-form-item label="附件" prop="accessorList"> <el-upload v-model="form.accessorList" style="display: inline-block;float: left;"
vue el-upload实现图片和文字上传
lemon今天学习了吗？的博客
11-25 5125
slot="file" slot-scope="{ file }" 自定义插槽，可以在里面实现输入框。:file-list="imageList" 图片都存到的自定义 imageList 数组。:before-remove="() => false" 防止按下删除键图片和文字被删除。:before-upload="beforeAvatarUpload" 上传时的校验回调。:action="fileUrl" 调用接口自定义的fileUrl上传图片到的服务路径。
VUE3+TS+setup行内使用elementplus封装图片上传,父组件用v-model传值
05-30
好的，你的问题是关于Vue3和TypeScript结合使用Element Plus组件库进行图片上传并使用v-model进行值传递的问题。那么我来为你解答一下： 首先，在Vue3中，我们可以使用`<script setup>`语法来编写组件逻辑，这样可以更加简洁和易于理解。同时，使用TypeScript可以让我们在开发过程中更加规范和高效。 其次，对于Element Plus组件库的使用，我们可以通过`import`语句引入需要使用的组件。在图片上传组件中，我们可以使用`<el-upload>`组件来进行上传操作。同时，我们可以通过`v-model`来进行值的双向绑定，从而实现父子组件之间的数据传递。 下面是一个示例代码，供你参考： ```html <template> <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-success="handleSuccess" :before-upload="beforeUpload" v-bind="$attrs" v-model="fileList" :auto-upload="false" > <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip"> 只能上传jpg/png文件，且不超过500kb </div> </el-upload> </template> <script setup lang="ts"> import { defineProps } from 'vue'; import { ElUpload } from 'element-plus'; interface UploadProps { value: any; onChange: (val: any) => void; } const props = defineProps<UploadProps>({ value: {}, onChange: () => {}, }); const fileList = props.value; const handleSuccess = (res: any, file: any) => { console.log(res, file); }; const beforeUpload = (file: any) => { const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; const isLt500Kb = file.size / 1024 < 500; if (!isJpgOrPng) { this.$message.error('只能上传jpg/png文件'); return false; } if (!isLt500Kb) { this.$message.error('文件大小不能超过500kb'); return false; } return true; }; watch( () => fileList, (newVal) => { props.onChange(newVal); } ); </script> ``` 在父组件中，我们可以使用`v-model`来进行值的双向绑定，如下所示： ```html <template> <div> <Upload v-model="imageUrl" /> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import Upload from './Upload.vue'; const imageUrl = ref(''); </script> ``` 这样，当子组件中的值发生变化时，父组件中的`imageUrl`变量也会相应地更新。 希望这个回答能够帮助到你，如有疑问，欢迎继续追问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值