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>datadata:{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;}}
如果觉得《上传图片的方法(单张或者多张)》对你有帮助,请点赞、收藏,并留下你的观点哦!