1500字范文 > 上传图片的方法（单张或者多张）

上传图片的方法（单张或者多张）

时间：2020-06-11 16:53:09

相关推荐

上传图片的方法（单张或者多张）

1：多个图片上传版本

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

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。