單張上傳圖片的方法

1:

<div class="pclogo">
	<img v-show="!fileimg" src="@/assets/img/[email protected]" 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;
				};
			},

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章