el-upload標(biāo)簽上傳圖片
有兩種方式：
1、上傳圖片到服務(wù)器上，在數(shù)據(jù)庫(kù)中存一個(gè)url；（以后遷環(huán)境的時(shí)候，必須將指定的文件夾一起遷移，比較繁瑣
2、將圖片轉(zhuǎn)為base64形勢(shì)存放到數(shù)據(jù)庫(kù)中；（較低一點(diǎn)很方便）
兩者在前端img標(biāo)簽中使用src，都可將圖片展示出
**
下面介紹的是第二種方法
**
使用el-upload將圖片加載成Base64格式，通過(guò)form統(tǒng)一上傳給后端
1、創(chuàng)建通用component ImgComponent.vue
<template>
<el-upload class="upload-demo" action="" ref="upload" list-type="picture-card" :auto-upload="false"
:on-change="changeUpload" accept="image/jpeg,image/gif,image/png,image/bmp">
<i slot="default" class="el-icon-plus"></i>
</el-upload>
</template>
<script>
export default {
name: "regShopImg",
data() {
return {
imageUrl: "",
imgthing: {},
};
},
props: ["imgN", "nameN"],
methods: {
changeUpload(file, fileList) {
console.log(file);
console.log("2:", fileList);
// 判斷圖片大小
if (fileList[0].size < 1100000) {
// 判斷圖片格式是否為jpg,png,jepg,gif
var fileName = fileList[0].name;
// var suffixIndex=fileName.lastIndexOf(".")
// var suffix=fileName.substring(suffixIndex+1).toUpperCase()
var suffix = fileName
.substring(fileName.lastIndexOf(".") + 1)
.toUpperCase();
if (
suffix == "BMP" ||
suffix == "JPG" ||
suffix == "JPEG" ||
suffix == "PNG" ||
suffix == "GIF" ||
suffix == "png" ||
suffix == "jpeg"
) {
this.fileList = fileList;
this.$nextTick(() => {
var i = this.imgN;
let uploadLists = document.getElementsByClassName("el-upload-list");
let uploadListsN = uploadLists[i];
let uploadListLi = uploadListsN.children;
uploadListsN.setAttribute(
"style",
"position: absolute;height: 160px;margin-top: 0;margin-left: 0px;width: 260px;overflow: hidden"
);
let liA = uploadListLi[0];
// 試著獲取bolb里面的數(shù)據(jù)------------S
//獲取圖片的Blob值
function getImageBlob(url, cb) {
var xhr = new XMLHttpRequest();
xhr.open("get", url, true);
xhr.responseType = "blob";
xhr.onload = function () {
if (this.status == 200) {
if (cb) cb(this.response);
}
};
xhr.send();
}
function preView(url) {
let reader = new FileReader();
getImageBlob(url, function (blob) {
reader.readAsDataURL(blob);
});
reader.onload = function (e) {
// 獲取bolb里面數(shù)據(jù)時(shí),生成預(yù)覽
var img = document.createElement("img");
//console.log("e.target.result:", e.target.result);
img.src = e.target.result;
// 獲取bolb里面數(shù)據(jù)時(shí),生成預(yù)覽
let imgElement = document.createElement("img");
console.log('fileList[0].url:', fileList[0].url);
imgElement.setAttribute("src", fileList[0].url);
imgElement.setAttribute(
"style",
"max-width:100%;padding-left:0"
);
if (liA.lastElementChild.nodeName !== "IMG") {
liA.appendChild(imgElement);
}
// 把base64的信息放到imgthing的file里
file.base64 = e.target.result;
};
}
preView(fileList[0].url);
// 修改nameN名字對(duì)應(yīng)的數(shù)據(jù),在一個(gè)頁(yè)面使用多個(gè)不同字段圖片上傳，為了復(fù)用組件
if (this.nameN === "hsptLogoImg") {
this.imgthing.hsptLogoImg = file;
}
if (this.nameN === "userHead") {
this.imgthing.userHead = file;
}
// console.log("this.imgthing:", this.imgthing);
this.$emit("imgthing", this.imgthing);
} else {
this.$message.error("文件類型不正確,請(qǐng)重新上傳！");
}
} else {
this.$message.error("圖片大小超過(guò)1M,請(qǐng)重新上傳");
}
},
},
};
</script>
<style scoped lang="scss">
// 上傳
.upload-demo {
width: 260px;
height: 160px;
.upload_btn {
width: 260px;
height: 160px;
background: #f2f2f2;
}
.el-upload__tip {
margin: 0;
float: left;
}
}
</style>
2、在父組件中使用
<ImgComp :imgN='0' :nameN='hsptLogoImg' @imgthing='imgthing' v-model="formItem.hsptLogoImg"></ImgComp>
import ImgComp from '@/components/ImgComponent.vue'
//在method中添加方法，目的是上傳到插件上，將圖片展示出來(lái)
methods: {
imgthing(imgthing) {
//console.log('imgthing:',imgthing);
// 合并對(duì)象
this.Imgthing = Object.assign(this.Imgthing, imgthing)
// 填充到ruleForm對(duì)應(yīng)項(xiàng),用來(lái)判斷是否有數(shù)據(jù)
this.formItem.hsptLogoImg = this.Imgthing.hsptLogoImg
this.formItem.userHead = this.Imgthing.userHead
},
}
3、最后通過(guò)form統(tǒng)一submit到后端，圖片參數(shù)傳base64即可。
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-531870.html
ps：起初在數(shù)據(jù)庫(kù)中，將存圖片的字段類型設(shè)置為BLOB，以二進(jìn)制的形勢(shì)存儲(chǔ)，后面發(fā)現(xiàn)會(huì)將“：”轉(zhuǎn)變?yōu)椤?/”。將字段類型設(shè)置為clob，以文本的形勢(shì)存儲(chǔ)，就可解決上述問(wèn)題；文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-531870.html
到了這里，關(guān)于vue 2.0+element ui 使用el-upload圖片上傳的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
