您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(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" //是否在選取文件后立即進(jìn)行上傳 :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}" //用來隱藏到達(dá)limit最大值之后 關(guān)閉上傳按鈕 :disabled="disabled" //為查看不能上傳進(jìn)行處理 > <i class="el-icon-plus"></i> </el-upload> //查看圖片 <el-dialog width="30%" :visible.sync="dialogVisible"> <img width="100%" :src="imgUrl.url" alt /> </el-dialog> //如果不是需要直接上傳的,而是需要按鈕點擊再進(jìn)行圖片上傳請打開此方法 //上面的el-upload標(biāo)簽里on-change換成http-request方法 <!-- <Button text="上 傳" type="add_u" @click.native="submitUpload"></Button> --> </el-form> </div> </template> <script> //引入上傳圖片接口 import { uploadImg } from "@/api/public/api"; export default { 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; else this.showUpload = false; }, }, methods: { //文件列表移除文件時的函數(shù) handleRemove(file, fileList) { const index = 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; // const file = e.file; <- 這里是不需要直接上傳而是通過按鈕上傳的 const file = e.raw; // <- 這里是直接上傳的 //大小 const size = 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的圖片", }); } else if (size > 2) { this.$notify.warning({ title: "警告", message: "圖片大小必須小于2M", }); } else { if (this.limit == 1) this.imgUrl = []; //此處判斷為一張的時候需要清空數(shù)組 const params = new FormData(); params.append("source", file); uploadImg(params).then((res) => { //這里返回的數(shù)據(jù)結(jié)構(gòu)(根據(jù)自己返回結(jié)構(gòu)進(jìn)行修改) if (res.data.status === 1) { this.$message.success("上傳成功"); this.imgUrl = res.data; //調(diào)用父組件的方法來傳遞圖片參數(shù) this.$emit("getUrl", this.imgUrl); } else this.$message.error("上傳失敗"); }); } }, //文件超出個數(shù)限制時的函數(shù) handleExceed(files, fileList) { this.$message.info(`最多只允許上傳${this.limit}張圖片`); }, }, }; </script> //這里修改上傳前后的樣式(我覺得el-upload不好看 也可以自行修改) <style scope> .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: 1px dashed #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
//圖片上傳組件 import UploadImg from "@/views/common/UploadImg.vue"; Vue.component('UploadImg', UploadImg)
demo.vue
<el-form-item label="上傳圖片"> //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) };
感謝各位的閱讀!關(guān)于“vue如何實現(xiàn)上傳圖片組件”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。