這篇文章給大家分享的是有關(guān)vue如何實現(xiàn)上傳圖片組件的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

未上傳狀態(tài)

上傳狀態(tài)

其他狀態(tài)(查看/刪除)

自定義組件文件名稱 - 這里叫UploadImg.vue

<template>
<div>
<el-form>
<!--:on-change="uploadFile"-->
<el-upload
:limit="limit"//最大允許上傳個數(shù)
action
accept="image/*"//接受上傳的
:on-change="uploadFile"//文件狀態(tài)改變時的函數(shù)
list-type="picture-card"//文件列表的類型
:auto-upload="false"//是否在選取文件后立即進行上傳
:file-list="fileList"//虛擬文件數(shù)組
:on-exceed="handleExceed"//文件超出個數(shù)限制時的函數(shù)
:on-preview="handlePictureCardPreview"//點擊文件列表中已上傳的文件時的函數(shù)
:on-remove="handleRemove"//文件列表移除文件時的函數(shù)
ref="upload"
class="avatar-uploader"
:class="{hide:showUpload}"//用來隱藏到達limit最大值之后關(guān)閉上傳按鈕
:disabled="disabled"//為查看不能上傳進行處理
>
<iclass="el-icon-plus"></i>
</el-upload>
//查看圖片
<el-dialogwidth="30%":visible.sync="dialogVisible">
<imgwidth="100%":src="imgUrl.url"alt/>
</el-dialog>
//如果不是需要直接上傳的,而是需要按鈕點擊再進行圖片上傳請打開此方法
//上面的el-upload標簽里on-change換成http-request方法
<!--<Buttontext="上傳"type="add_u"@click.native="submitUpload"></Button>-->
</el-form>
</div>
</template>

<script>
//引入上傳圖片接口
import{uploadImg}from"@/api/public/api";
exportdefault{
props:{
limit:Number,
fileList:Array,
disabled:Boolean,
},
data(){
return{
showUpload:false,//控制limit最大值之后關(guān)閉上傳按鈕
dialogVisible:false,//查看圖片彈出框
imgUrl:[],//上傳圖片后地址合集
};
},
//監(jiān)聽上傳圖片的數(shù)組(為了處理修改時,自動渲染問題,和上傳按鈕消失問題);
watch:{
fileList(newName,oldName){
if(newName.length==this.limit)this.showUpload=true;
elsethis.showUpload=false;
},
},
methods:{
//文件列表移除文件時的函數(shù)
handleRemove(file,fileList){
constindex=this.fileList.findIndex((item)=>item===file.uid);
this.imgUrl.splice(index,1);
this.$emit("delUrl",this.imgUrl);
if(fileList.length<this.limit)this.showUpload=false;
},
//點擊文件列表中已上傳的文件時的函數(shù)
handlePictureCardPreview(file){
this.imgUrl.url=file.url;
this.dialogVisible=true;
},
//這里是不需要直接上傳而是通過按鈕上傳的方法
submitUpload(){
this.$refs.upload.submit();
},
//文件狀態(tài)改變時的函數(shù)(主要邏輯函數(shù))
uploadFile(e,fileList){
//判斷用戶上傳最大數(shù)量限制,來讓上傳按鈕消失
if(fileList.length>=this.limit)this.showUpload=true;
//constfile=e.file;<-這里是不需要直接上傳而是通過按鈕上傳的
constfile=e.raw;//<-這里是直接上傳的
//大小
constsize=file.size/1024/1024/2;
if(
!(
file.type==="image/png"||
file.type==="image/gif"||
file.type==="image/jpg"||
file.type==="image/jpeg"
)
){
this.$notify.warning({
title:"警告",
message:
"請上傳格式為image/png,image/gif,image/jpg,image/jpeg的圖片",
});
}elseif(size>2){
this.$notify.warning({
title:"警告",
message:"圖片大小必須小于2M",
});
}else{
if(this.limit==1)this.imgUrl=[];//此處判斷為一張的時候需要清空數(shù)組
constparams=newFormData();
params.append("source",file);
uploadImg(params).then((res)=>{
//這里返回的數(shù)據(jù)結(jié)構(gòu)(根據(jù)自己返回結(jié)構(gòu)進行修改)
if(res.data.status===1){
this.$message.success("上傳成功");
this.imgUrl=res.data;
//調(diào)用父組件的方法來傳遞圖片參數(shù)
this.$emit("getUrl",this.imgUrl);
}elsethis.$message.error("上傳失敗");
});
}
},
//文件超出個數(shù)限制時的函數(shù)
handleExceed(files,fileList){
this.$message.info(`最多只允許上傳${this.limit}張圖片`);
},
},
};
</script>

//這里修改上傳前后的樣式(我覺得el-upload不好看也可以自行修改)
<stylescope>
.hide.el-upload--picture-card{
display:none!important;
}
.avatar-uploader>.el-upload{
width:200px;
height:200px;
line-height:200px;
border-radius:0px;
background:#fff;
border:1pxdashed#ccc;
}
.avatar-uploader>.el-upload>i{
font-size:28px;
color:#ccc;
}
.avatar-uploader>.el-upload-list{
display:block;
}
.avatar-uploader>.el-upload-list>.el-upload-list__item{
width:200px;
height:200px;
display:block;
}
.avatar-uploader>.el-upload-list>.el-upload-list__item>img{
width:200px;
height:200px;
border-radius:0px;
}
</style>

在頁面中使用 - (因為我這邊用的地方比較多,我就寫全局了,你們可以根據(jù)自身項目來決定)

main.js

//圖片上傳組件
importUploadImgfrom"@/views/common/UploadImg.vue";
Vue.component('UploadImg',UploadImg)

demo.vue

<el-form-itemlabel="上傳圖片">
//limit最大上傳幾張圖片//fileList圖片數(shù)組//getUrl獲取上傳后地址//delUrl刪除上傳后地址//disabled禁用處理
<UploadImg:limit="1":file-list="fileList"@getUrl="getUrl($event,'自己需要攜帶的參數(shù)')"@delUrl="delUrl($event,'自己需要攜帶的參數(shù)')":disabled="true"/>
</el-form-item>

//變量聲明
data:{
fileList:[]
}
//函數(shù)
getUrl(getUrl){
console.log(getUrl)
};
delUrl(getUrl){
console.log(getUrl)
};

總結(jié)

以上是生活随笔為你收集整理的vue如何实现上传图片组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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