npm i element-ui -S

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

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

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

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

?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);
? ? ? ? };
? ? ? });
? ? },

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