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

總結

以上是生活随笔為你收集整理的上传图片的方法（单张或者多张）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。