欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue結(jié)合ElementUI上傳Base64編碼后的圖片實(shí)例

 更新時間：2022年04月08日 16:38:01   作者：陽光之末亞  
這篇文章主要介紹了Vue結(jié)合ElementUI上傳Base64編碼后的圖片實(shí)例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

ElementUI上傳Base64編碼后的圖片

自我認(rèn)為ElementUI還是一個很不錯的寫手機(jī)端的組件，所以這次做小項(xiàng)目的時候就用了ElementUI的Upload組件來實(shí)現(xiàn)圖片的上傳，不過ElementUI組件的上傳圖片更易于實(shí)現(xiàn)圖片以File文件的形式實(shí)現(xiàn)，但是這次我需要把圖片轉(zhuǎn)換為base64編碼來實(shí)現(xiàn)圖片的上傳。

安裝ElementUI

npm i element-ui -S

按需引入(當(dāng)然如果需要你也可以全部引入)

import { Upload } from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Upload);

上傳實(shí)現(xiàn) 

<template>
? ? <div>
? ? ? ?<el-upload
? ? ? ? ? class="avatar-uploader"
? ? ? ? ? :action="actionUrl"
? ? ? ? ? :show-file-list="false"
? ? ? ? ? :on-change="getFile">
? ? ? ? ? <img v-if="imageUrl" ref="phoUrl" :src="imageUrl" class="avatar">
? ? ? ? ? <i v-else class="el-icon-plus avatar-uploader-icon"></i>
? ? ? ? </el-upload>
? ? </div>
</template>
<script>
import {Toast} from "mint-ui";
export default {
? ?data() {
? ? ? return {
? ? ? ?actionUrl:'',
? ? ? ?imageUrl:'', //上傳圖片
? ? ? };
? ? },
? ? methods: {
? ? ?getBase64(file){ ?//把圖片轉(zhuǎn)成base64編碼
? ? ? ? ?return new Promise(function(resolve,reject){
? ? ? ? ? ? ?let reader=new FileReader();
? ? ? ? ? ? ?let imgResult="";
? ? ? ? ? ? ?reader.readAsDataURL(file);
? ? ? ? ? ? ?reader.onload=function(){
? ? ? ? ? ? ? ? ?imgResult=reader.result;
? ? ? ? ? ? ?};
? ? ? ? ? ? ?reader.onerror=function(error){
? ? ? ? ? ? ? ? ?reject(error);
? ? ? ? ? ? ?};
? ? ? ? ? ? ?reader.onloadend=function(){
? ? ? ? ? ? ? ? ?resolve(imgResult);
? ? ? ? ? ? ?}
? ? ? ? ?})
? ? ?},
? ? ?getFile(file,fileList){ ?//上傳頭像
? ? ? ?this.getBase64(file.raw).then(res=>{
? ? ? ? ? ?this.$http.post('home/ImgUpload',{"img":res}).then(result=>{
? ? ? ? ? ? ? ?if(result.body.status===200){
? ? ? ? ? ? ? ? ? ?this.imageUrl=result.body.data;
? ? ? ? ? ? ? ?}else{
? ? ? ? ? ? ? ? ? ?Toast('圖片上傳失敗');
? ? ? ? ? ? ? ?}
? ? ? ? ? ?})
? ? ? ?})
? ? ?}
? ? }
}
</script>
<style>
? .avatar-uploader .el-upload {
? ? border: 1px dashed #d9d9d9;
? ? border-radius: 6px;
? ? cursor: pointer;
? ? position: relative;
? ? overflow: hidden;
? ? width:101px;
? ? height:101px;
? }
? .avatar-uploader .el-upload:hover {
? ? border-color: #409EFF;
? }
? .avatar-uploader .el-upload .el-upload__input{
? ? ? display: none;
? }
? .avatar-uploader-icon {
? ? font-size: 28px;
? ? color: #8c939d;
? ? width: 100px;
? ? height: 100px;
? ? line-height: 100px;
? ? text-align: center;
? }
? .avatar {
? ? width: 100px;
? ? height: 100px;
? ? display: block;
? }
</style>

ElementUI把上傳的圖片轉(zhuǎn)為Base64

使用組件，然后on-change綁定一個方法來獲取文件信息，auto-upload設(shè)置為false即可 

?<el-upload action='' :on-change="getFile" :limit="1" list-type="picture" :auto-upload="false">
? ? ? ? ? ? <el-button size="small" type="primary">選擇圖片上傳,最多上傳一張圖片</el-button>
? ? ? ? ? </el-upload>

定義methods方法,當(dāng)上傳文件就會觸發(fā)綁定的函數(shù)，然后文件的內(nèi)容就會綁定到函數(shù)的參數(shù)里面，這樣用file.raw就可以獲取文件的內(nèi)容了。

? getFile(file, fileList) {
? ? ?console.log(file.raw)
? ? },

然后自定義一個方法，用來把圖片內(nèi)容轉(zhuǎn)為base64格式，imgResult就是base64格式的內(nèi)容了。轉(zhuǎn)為base64字符串要調(diào)用h5特性中的FileReader這個api,但是這個api不能return，所以用promise封裝一下。

?getBase64(file) {
? ? ? return new Promise(function(resolve, reject) {
? ? ? ? let reader = new FileReader();
? ? ? ? let imgResult = "";
? ? ? ? reader.readAsDataURL(file);
? ? ? ? reader.onload = function() {
? ? ? ? ? imgResult = reader.result;
? ? ? ? };
? ? ? ? reader.onerror = function(error) {
? ? ? ? ? reject(error);
? ? ? ? };
? ? ? ? reader.onloadend = function() {
? ? ? ? ? resolve(imgResult);
? ? ? ? };
? ? ? });
? ? },

最后調(diào)用一下

?getFile(file, fileList) {? ??
? ? ? this.getBase64(file.raw).then(res => {
? ? ? console.log(res)
? ? ? });
? ? },

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

  • mint-ui在vue中的使用示例

    mint-ui在vue中的使用示例

    Mint UI 是 由餓了么前端團(tuán)隊(duì)推出的 一個基于 Vue.js 的移動端組件庫，這篇文章主要介紹了mint-ui在vue中的使用示例，這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下
    2018-04-04
  • Vue中使用stylus報錯的解決

    Vue中使用stylus報錯的解決

    如果你也和我一樣，按照正常的流程下載并且配置了stylus，但是依舊報錯，也許這篇文章就是你的菜，一起來看看吧
    2022-08-08
  • 淺談vue中$bus的使用和涉及到的問題

    淺談vue中$bus的使用和涉及到的問題

    這篇文章主要介紹了淺談vue中$bus的使用和涉及到的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • 使用VitePress搭建及部署vue組件庫文檔的示例詳解

    使用VitePress搭建及部署vue組件庫文檔的示例詳解

    這篇文章主要介紹了使用VitePress搭建及部署vue組件庫文檔,本文以element-plus作為示例來搭建一個文檔，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
    2022-08-08
  • 基于Vue方法實(shí)現(xiàn)簡單計時器

    基于Vue方法實(shí)現(xiàn)簡單計時器

    這篇文章主要為大家詳細(xì)介紹了基于Vue方法實(shí)現(xiàn)簡單計時器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-08-08
  • vue2.0的計算屬性computed和watch的區(qū)別及各自?使用場景解讀

    vue2.0的計算屬性computed和watch的區(qū)別及各自?使用場景解讀

    這篇文章主要介紹了vue2.0的計算屬性computed和watch的區(qū)別及各自?使用場景，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-01-01
  • Vue引入騰訊地圖全過程(搜索獲取定位)

    Vue引入騰訊地圖全過程(搜索獲取定位)

    最近需要在項(xiàng)目中使用地圖顯示點(diǎn)位信息,所以引入了騰訊地圖,這篇文章主要給大家介紹了關(guān)于Vue引入騰訊地圖(搜索獲取定位)的相關(guān)資料,需要的朋友可以參考下
    2023-10-10
  • Vue3使用Suspense優(yōu)雅地處理異步組件加載的示例代碼

    Vue3使用Suspense優(yōu)雅地處理異步組件加載的示例代碼

    Vue3是Vue.js的最新版本,它帶來了許多令人興奮的新特性和改進(jìn),其中一個重要的特性是Suspense,它為我們提供了一種優(yōu)雅地處理異步組件加載和錯誤處理的方式,本文給大家介紹了Vue3使用Suspense優(yōu)雅地處理異步組件加載的示例,需要的朋友可以參考下
    2024-01-01
  • 詳解vue+webpack+express中間件接口使用

    詳解vue+webpack+express中間件接口使用

    這篇文章主要介紹了詳解vue+webpack+express中間件接口使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-07-07
  • Vue+ECharts實(shí)現(xiàn)中國地圖的繪制及各省份自動輪播高亮顯示

    Vue+ECharts實(shí)現(xiàn)中國地圖的繪制及各省份自動輪播高亮顯示

    這篇文章主要介紹了Vue+ECharts實(shí)現(xiàn)中國地圖的繪制以及拖動、縮放和各省份自動輪播高亮顯示,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2021-12-12

最新評論