在vue后臺(tái)管理系統(tǒng)里面，有時(shí)候會(huì)遇到一個(gè)圖片上傳的功能绒净，做這個(gè)功能的時(shí)候的思路是這樣的：
1：首選由前端寫一個(gè)圖片上傳的upload標(biāo)簽见咒，選擇本地的圖片文件之后
2:調(diào)用后端給的接口，以二進(jìn)制文件的形式傳給后端服務(wù)器
3:服務(wù)器進(jìn)行處理挂疆，處理完成之后將服務(wù)器的主機(jī)名加到圖片名稱的前綴上
4:返回一個(gè)有服務(wù)器主機(jī)+圖片名稱的在線就可以訪問的鏈接給到前端
5:前端直接將在線鏈接路徑渲染在界面顯示圖片
在vue-element-admin里面的具體的實(shí)踐
1:在store/modules里面新建一個(gè)api.js
將上傳圖片至服務(wù)器的后端小伙伴給的接口寫在這個(gè)js里面
image
const baseUrl = 'http://39.xx.xxx.1xx/yyexploreplatform'
const state = {
fileUpload: baseUrl + '/upload/file'
}
export default { state }
2：打開store/getters.js
getters.js
const getters = {
fileUpload: state => state.api.fileUpload,
}
export default getters
image
3：新建一個(gè)index.vue頁面
image
開始寫代碼：
<template>
<div class="app-container">
<el-form ref="nextProjectForm" :model="nextProjectForm" label-width="100px">
<el-form-item label="插入圖片">
<el-upload
class="avatar-uploader"
:action="fileUpload"
:headers="{ Authorization: token }"
:show-file-list="false"
:on-success="handleAvatarSuccess">
<img
v-if="nextProjectForm.publicWelfareUrl"
:src="nextProjectForm.publicWelfareUrl"
class="avatar"/>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
data() {
return {
nextProjectForm: {
publicWelfareUrl: "",
},
};
},
computed: {
...mapGetters(["fileUpload", "token"])
},
methods: {
handleAvatarSuccess(response, file, fileList) {
if (response && response.data && response.data.url) {
this.$set(this.nextProjectForm, "publicWelfareUrl", response.data.url);
}
},
}
};
</script>
<style lang='scss'>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
4:效果如下：
image
5：有些業(yè)務(wù)需求是這樣的改览，給定一個(gè)圖片尺寸，比如說最大寬度是500囱嫩，最大高度是300恃疯，如果上傳的圖片尺寸超過這個(gè)范圍，在上傳的時(shí)候墨闲，一個(gè)提示今妄，不符合這個(gè)尺寸的都無法上傳。
這個(gè)時(shí)候鸳碧，就需要進(jìn)行判斷了
需要在upload里面添加一個(gè):before-upload方法
image
然后在 methods里面寫一下這個(gè)方法的實(shí)現(xiàn)過程代碼
//對圖片大小的限制
handleImagesUrlBefore:function(file){
var _this = this;
return new Promise(function(resolve, reject) {
var reader = new FileReader();
reader.onload = function(event) {
var image = new Image();
image.onload = function () {
var width = this.width;
var height = this.height;
if (width>500 ){
_this.$alert('圖片寬度尺寸必須在500之內(nèi)盾鳞！', '提示', {confirmButtonText: '確定'});
reject();
}
if (height >300) {
_this.$alert('圖片高度尺寸必須在300之內(nèi)！', '提示', {confirmButtonText: '確定'});
reject();
}
resolve();
};
image.src = event.target.result;
}
reader.readAsDataURL(file);
});
},
完整的參考代碼：
<template>
<div class="app-container">
<el-form ref="nextProjectForm" :model="nextProjectForm" label-width="100px">
<el-form-item label="插入圖片">
<el-upload
class="avatar-uploader"
:action="fileUpload"
:before-upload="handleImagesUrlBefore"
:headers="{ Authorization: token }"
:show-file-list="false"
:on-success="handleAvatarSuccess">
<img
v-if="nextProjectForm.publicWelfareUrl"
:src="nextProjectForm.publicWelfareUrl"
class="avatar"/>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
data() {
return {
nextProjectForm: {
publicWelfareUrl: "",
},
};
},
computed: {
...mapGetters(["fileUpload", "token"])
},
methods: {
//對圖片大小的限制
handleImagesUrlBefore:function(file){
var _this = this;
return new Promise(function(resolve, reject) {
var reader = new FileReader();
reader.onload = function(event) {
var image = new Image();
image.onload = function () {
var width = this.width;
var height = this.height;
if (width>500 ){
_this.$alert('圖片寬度尺寸必須在500之內(nèi)瞻离！', '提示', {confirmButtonText: '確定'});
reject();
}
if (height >300) {
_this.$alert('圖片高度尺寸必須在300之內(nèi)腾仅！', '提示', {confirmButtonText: '確定'});
reject();
}
resolve();
};
image.src = event.target.result;
}
reader.readAsDataURL(file);
});
},
handleAvatarSuccess(response, file, fileList) {
if (response && response.data && response.data.url) {
this.$set(this.nextProjectForm, "publicWelfareUrl", response.data.url);
}
},
}
};
</script>
<style lang='scss'>
.avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.avatar {
width: 178px;
height: 178px;
display: block;
}
</style>
如果不符合尺寸的時(shí)候，會(huì)有一個(gè)彈框進(jìn)行提示套利。
image
原作者：祈澈菇?jīng)?br>
鏈接：http://www.reibang.com/p/383e1f2f4276
來源：簡書
著作權(quán)歸作者所有推励。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處肉迫。
