上传图片的方法(单张或者多张)

11 篇文章 0 订阅

1:多个图片上传版本

<div class="pclogo">
	<img v-show="!fileimg" src="@/assets/img/zheng@2x.png" alt="正面" class="pic">
	<img v-show="fileimg" :src="fileimg&&fileimg" class="pic" alt="正面">
	<input type="file" ref="positive" @change="uppic('positive')" accept="image/jpeg,image/png,image/gif" class="iptfile">
</div>
<div class="pclogo">
	<img v-show="!fileimg" src="@/assets/img/zheng@2x.png" alt="正面" class="pic">
	<img v-show="fileimg" :src="fileimg&&fileimg" class="pic" alt="正面">
	<input type="file" ref="positive" @change="uppic('anti')" accept="image/jpeg,image/png,image/gif" class="iptfile">
</div>
<div class="pclogo">
	<img v-show="!fileimg" src="@/assets/img/zheng@2x.png" alt="正面" class="pic">
	<img v-show="fileimg" :src="fileimg&&fileimg" class="pic" alt="正面">
	<input type="file" ref="positive" @change="uppic('pz')" accept="image/jpeg,image/png,image/gif" class="iptfile">
</div>
	.pclogo{
			margin-top: 30px;
			position: relative;
			.iptfile{
				position: absolute;
				top: 0px;
				left: 0px;
				width: 300px;height: 150px;
				display: inline-block;
				opacity: 0;
			}
			.pic{
				width: 300px;height: 150px;
			}
	}
uppic(name) {
				let oFile = {};
				if (name == 'positive') {
					oFile = this.$refs.positive.files[0];
					this.oFile1 = this.$refs.positive.files[0];
				}
				if (name == 'anti') {
					oFile = this.$refs.anti.files[0];
					this.oFile2 = this.$refs.anti.files[0];
				}
				if (name == 'pz') {
					oFile = this.$refs.pz.files[0];
					this.oFile3 = this.$refs.pz.files[0];
				}

				// console.log(this.$refs.positive.files.src,name);
				var oFReader = new FileReader();
				oFReader.readAsDataURL(oFile); // 开始在后台进行读取操作。当图像文件的所有内容加载后,他们转换成一个data:URL,传递到onload回调函数中
				const _this = this;
				oFReader.onload = function(oFREvent) {
					//当读取操作成功完成时调用.
					if (name == 'positive') {
						_this.fileimg = oFREvent.target.result;
					}
					if (name == 'anti') {
						_this.fileimg1 = oFREvent.target.result;
					}
					if (name == 'pz') {
						_this.fileimg2 = oFREvent.target.result;
					}
				};
			},

2:单个图片上传方式

1:

<div class="pclogo">
	<img v-show="!fileimg" src="@/assets/img/zheng@2x.png" alt="正面" class="pic">
	<img v-show="fileimg" :src="fileimg&&fileimg" class="pic" alt="正面">
	<input type="file" ref="positive" @change="uppic('positive')" accept="image/jpeg,image/png,image/gif" class="iptfile">
</div>
	.pclogo{
			margin-top: 30px;
			position: relative;
			.iptfile{
				position: absolute;
				top: 0px;
				left: 0px;
				width: 300px;height: 150px;
				display: inline-block;
				opacity: 0;
			}
			.pic{
				width: 300px;height: 150px;
			}
	}
	uppic(name) {
				let oFile = {};
				oFile = this.$refs.positive.files[0];
				this.oFile1 = this.$refs.positive.files[0];
				// console.log(this.$refs.positive.files.src,name);
				var oFReader = new FileReader();
				oFReader.readAsDataURL(oFile); 
				// 开始在后台进行读取操作。当图像文件的所有内容加载后,他们转换成一个data:URL,传递到onload回调函数中
				const _this = this;
				oFReader.onload = function(oFREvent) {
					//当读取操作成功完成时调用.
					_this.fileimg = oFREvent.target.result;
				};
			},

html


<div class="pclogo1">
      <div class="show-div">
        <img v-show="!fileimg" src="@/assets/img/zheng@2x.jpg" alt="正面" class="pic">
        <img v-show="fileimg" :src="fileimg&&fileimg" class="pic" alt="正面">
        <input type="file" ref="pclogo" @change="uppic" accept="image/jpeg,image/png,image/gif" class="iptfile">
      </div>
</div>

data
data:{
	return{
	  	  fileimg: '',
		  formdata:{
			oFile:{}
		}
	}
}

methods:

uppic() { //添加图片
        this.formdata.oFile = this.$refs.pclogo.files[0];
       	var oFReader = new FileReader();
       	// 开始在后台进行读取操作。当图像文件的所有内容加载后,他们转换成一个data:URL,传递到onload回调函数中
        oFReader.readAsDataURL(this.formdata.oFile);
        const _this = this;
        oFReader.onload = function(oFREvent) {
          //当读取操作成功完成时调用.
          _this.fileimg = oFREvent.target.result;
        };
},

css 

.pclogo1{
			margin-top: 30px;
			position: relative;
			.iptfile{
				position: absolute;
				top: 0px;
				left: 0px;
				width: 300px;height: 150px;
				display: inline-block;
				opacity: 0;
			}
			.pic{
				width: 300px;height: 150px;
			}
	}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值