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;
}
}