我們知道，img的src屬性或background的url屬性，可以通過(guò)被賦值為圖片網(wǎng)絡(luò)地址或base64的方式顯示圖片。
在文件上傳中，我們一般會(huì)先將本地文件上傳到服務(wù)器，上傳成功后，由后臺(tái)返回圖片的網(wǎng)絡(luò)地址再在前端顯示。
通過(guò)FileReader的readAsDataURL方法，我們可以不經(jīng)過(guò)后臺(tái)，直接將本地圖片顯示在頁(yè)面上。這樣做可以減少前后端頻繁的交互過(guò)程，減少服務(wù)器端無(wú)用的圖片資源，代碼如下：

iview官網(wǎng)查看

data(){return{iconFileSrc: null, // 展示再頁(yè)面上的圖片路徑editFormData: {iconFile: null // 傳給后臺(tái)的圖片路徑}}} <Card title="圖片素材" class="mt10"><FormItem label="應(yīng)用圖標(biāo)" prop="iconFile"><div v-if="iconFileSrc" class="upload-icon"><img height="100%" :src="iconFileSrc"></div><Uploadname="iconFile" // 上傳的文件字段名type="drag" // 上傳控件的類型，可選值為 select（點(diǎn)擊選擇），drag（支持拖拽）v-model="editFormData.iconFile"style="display:inline-block;width:58px;":max-size="200" // 文件大小限制，單位 kbaccept=".png" //接受上傳的文件類型:format="['png']" //支持的文件類型，與 accept 不同的是，format 是識(shí)別文件的后綴名，accept 為 input 標(biāo)簽原生的 accept 屬性，會(huì)在選擇文件時(shí)過(guò)濾，可以兩者結(jié)合使用:before-upload="iconFileBeforeUpload" // 上傳文件之前的鉤子，參數(shù)為上傳的文件，若返回 false 或者 Promise 則停止上傳action="//" // 上傳的地址，必填><div v-if="!editFormData.iconFile" style="width: 58px;height:58px;line-height: 58px;"><Icontype="md-add"size="20"></Icon></div><span v-else class="cp">更換</span></Upload><div class="tips">請(qǐng)上傳200K以內(nèi)的PNG格式圖片，尺寸為512X512</div></FormItem></Card> // 應(yīng)用圖標(biāo)上傳前iconFileBeforeUpload (file) {console.log(file)if (file.type !== 'image/png') {return this.$Notice.warning({title: '上傳格式錯(cuò)誤',desc: '上傳200K以內(nèi)的PNG格式圖片，尺寸為512X512'})}if (file.size > 204800) {return this.$Notice.warning({title: '文件超出限制大小',desc: '上傳200K以內(nèi)的PNG格式圖片，尺寸為512X512'})}this.editFormData.iconFile = file// 展示的時(shí)候 使用base64進(jìn)行展示 傳入數(shù)據(jù)庫(kù)的時(shí)候 還是使用原始的file 并進(jìn)行forData轉(zhuǎn)化const reader = new FileReader()reader.readAsDataURL(file) // 讀出 base64reader.onload = () => {// 圖片的 base64 格式, 可以直接當(dāng)成 img 的 src 屬性值const _base64 = reader.resultthis.iconFileSrc = _base64}return false},

file

對(duì)于圖片上傳，我們也可以先將圖片轉(zhuǎn)換為base64進(jìn)行傳輸，此時(shí)由于傳輸?shù)膱D片內(nèi)容就是一段字符串，故上傳接口可以當(dāng)做普通post接口處理，當(dāng)圖片傳輸?shù)胶笈_(tái)后，可以在轉(zhuǎn)換為文件實(shí)體存儲(chǔ)。
當(dāng)然，考慮到base64轉(zhuǎn)換效率及其本身的大小，本方法還是適合于上傳內(nèi)容簡(jiǎn)單或所占內(nèi)存較小的文件。
參考：https://www.cnblogs.com/hhhyaaon/p/5929492.html

總結(jié)

以上是生活随笔為你收集整理的JavaScript通过 new FileReader() 获取图片base64 无组件上传图片的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。