上傳圖片組件封裝 element ui

// element ui 文檔地址：  http://element.eleme.io/#/zh-CN
<template>
<div>
<div class="upload-style">
<el-upload
:show-file-list="false"
:on-success="handleImgSuccess"
:before-upload="beforeImgUpload"
:action="uploadUrl"
:data="uploadData"
:multiple="isMultiple"
:accept="paramsObjUsed.acceptImg"
:limit="paramsObjUsed.limit"
:on-exceed="onExceed"
:on-error="handleError"
name="files[]"
>
<el-button size="small" plain icon="el-icon-plus">點擊上傳</el-button>
</el-upload>
<ul class="img-box" v-if="fileList && fileList.length > 0">
<li
v-for="(item, index) in fileList"
:key="index"
v-loading="item.loading"
:style="
`width:${paramsObjUsed.imgWidth};height:${paramsObjUsed.imgHeight}`
"
>
<img
v-if="item.url"
:src="item.url"
:width="paramsObjUsed.imgWidth"
alt=""
/>
<span v-if="item && isShowClose && item.url" @click="deleteImg(item)"
>✕</span
>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "child",
props: {
paramsObj: {
type: Object,
required: false,
default: () => {
return {};
}
},
imgSize: {
//限制圖片寬高，不帶px單位
type: Object,
required: false,
default: () => {
return {
width: "",
height: ""
};
}
},
isMultiple: {
//是否多張上傳
type: Boolean,
required: false,
default: () => {
return false;
}
},
isShowClose: {
//是否支持刪除圖片
type: Boolean,
required: false,
default: () => {
return true;
}
},
defaultImgArr: {
// 默認圖片數組
type: Array,
required: false,
default: () => {
return [];
}
}
},
data() {
return {
paramsObjUsed: {
project: "", // 上傳圖片接受的參數，默認是「」
contentType: "", //上傳圖片接受的參數，默認是「」
acceptImg: "image/*", //上傳圖片配置接受的圖片格式
imgFormat: "", //圖片格式
imgFormatArr: [], //圖片類型數組作匹配查詢
sizeTips: "", //圖片大小
imgWidth: "200px", //圖片寬
imgHeight: "", //圖片高
fileSize: 1048576, //默認是1M
limit: 10, //每次上傳多少張圖片初始化，動態改變
limitTips: 10, //每次最多上傳多少張圖片提示
totalImg: 100 //最多上傳多少張圖片
},
uploadUrl: "",
uploadData: {
project: "elementUI",
contentType: this.paramsObj.contentType
},
fileList: [], //上傳服務器地址url
delFileList: [], //刪除的圖片
loading: false,
fileListRemove: []
};
},
watch: {
paramsObjUsed: {
handler(val) {
console.log(val.limit);
return val.limit;
},
deep: true
}
},
computed: {
newValue() {
return this.paramsObjUsed.limit;
}
},
created() {
this.paramsObjUsed = Object.assign(this.paramsObjUsed, this.paramsObj);
this.uploadUrl = this.$apis.api_common_files;
},
mounted() {
this.setImg(this.defaultImgArr);
let { uploadData } = this;
Object.assign(uploadData, this.$net.commonParams());
uploadData.signToken = this.$net.paramsSign(uploadData, this.uploadUrl);
this.uploadData = uploadData;
},
methods: {
//刪除圖片按鈕
deleteImg(item) {
let index = this.fileList.map(val => val.url).indexOf(item.url);
if (index !== -1) {
this.fileList.forEach((val, i) => {
if (index == i) {
this.delFileList.push(val.url);
}
});
this.fileList.splice(index, 1);
if (this.isMultiple) {
this.handleRemove(index);
}
}
},
setImg(arr) {
if (Array.isArray(arr) && arr.length > 0) {
arr.forEach(val => {
this.fileList.push({
url: val
});
});
}
},
getImg() {
let savImgArr = [];
this.fileList.forEach(item => {
let val = item.url.substring(item.url.indexOf(".com") + 4);
savImgArr.push(val);
});
return savImgArr;
},
delImg() {
if (
!this.delFileList ||
!Array.isArray(this.delFileList) ||
this.delFileList.length <= 0
) {
return false;
}
let delImgArr = [];
this.delFileList.forEach(item => {
let val = item.substring(item.indexOf(".com") + 4);
delImgArr.push(val);
});
let params = {};
params.url = this.$apis.api_common_files_del;
params.data = {
url: JSON.stringify(delImgArr),
project: "hooli"
};
this.$net.req(params).then(() => {});
},
beforeImgUpload(file) {
if (this.isMultiple) {
if (this.fileList.length < this.paramsObjUsed.totalImg) {
this.paramsObjUsed.limit += 1;
}
this.fileList.push({ uid: file.uid, loading: true, url: "" });
} else {
this.fileList = [{ uid: file.uid, loading: true, url: "" }];
}
let that = this;
let imgFormatArr = this.paramsObjUsed.imgFormatArr;
if (imgFormatArr.indexOf(file.type) === -1) {
this.$message.error(
"上傳的圖片僅限" + this.paramsObjUsed.imgFormat + "格式"
);
return Promise.reject();
}
let fileSize = file.size;
if (fileSize > this.paramsObjUsed.fileSize) {
this.$message.error(
"上傳的圖片大小不能超過" + this.paramsObjUsed.sizeTips
);
return Promise.reject();
}
const isOk = new Promise(function(resolve, reject) {
let _URL = window.URL || window.webkitURL;
let img = new Image();
img.src = _URL.createObjectURL(file);
img.onload = function() {
if (that.imgSize.width) {
let valid =
img.width == that.imgSize.width &&
img.height == that.imgSize.height;
valid ? resolve() : reject();
} else {
resolve();
}
};
img.onerror = function() {
that.$message.error("圖片文件受損，請從新選擇上傳");
return;
};
}).then(
() => {
return file;
},
() => {
if (that.imgSize) {
that.$message.error(
"上傳的圖片尺寸爲" +
that.imgSize.width +
"*" +
that.imgSize.height +
"px"
);
}
return Promise.reject();
}
);
return isOk;
},
handleRemove(idx) {
if (this.fileListRemove.length > this.fileList.length) {
this.fileListRemove.pop();
}
if (this.paramsObjUsed.limit > this.paramsObjUsed.limitTips) {
this.paramsObjUsed.limit -= 1;
}
this.fileList.forEach((val, index) => {
if (idx == index) {
this.fileListRemove.splice(idx, 1);
}
});
},
//每次最多上傳的圖片張數
onExceed(files, fileList) {
let limitArr = [];
for (let i in files) {
limitArr.push(files[i]);
}
limitArr = limitArr.filter(function(x) {
return x.name;
});
limitArr.pop();
if (limitArr.length > this.paramsObjUsed.limitTips) {
this.$message({
message: "每次最多上傳" + this.paramsObjUsed.limitTips + "張圖片哦",
type: "warning"
});
return false;
} else if (fileList.length > this.paramsObjUsed.totalImg) {
fileList.pop();
this.$message({
message: "最多上傳" + this.paramsObjUsed.totalImg + "張圖片哦",
type: "warning"
});
return false;
}
},
//總共最多能上傳多少張圖片
maxImgArr(img, file) {
if (this.fileList.length > this.paramsObjUsed.totalImg) {
this.fileList.pop();
this.$message({
message: "最多上傳" + this.paramsObjUsed.totalImg + "張圖片哦",
type: "warning"
});
return false;
} else {
this.fileList.forEach(val => {
if (val.uid == file.uid) {
val.loading = false;
val.url = img;
}
});
}
},
handleImgSuccess(res, file, fileList) {
this.fileListRemove = fileList;
if (parseInt(res.code) !== 0) {
this.fileList.forEach(val => {
if (val.uid == file.uid) {
val.loading = false;
}
});
this.$message.error(res.msg);
return false;
}
let img = res.data.host + res.data.url[0];
this.maxImgArr(img, file);
this.fileList.forEach(val => {
if (val.uid == file.uid) {
val.loading = false;
val.url = img;
}
});
},
handleError(err, file, fileList) {
console.log("err", err, file, fileList);
}
}
};
</script>
<style lang="less" scoped>
.one-img {
position: relative;
max-width: 200px;
img {
display: block;
margin-top: 20px;
width: 100%;
height: 100%;
}
span {
width: 20px;
height: 20px;
display: inline-block;
position: absolute;
top: -27px;
right: -22px;
z-index: 10;
cursor: pointer;
}
}
.img-box {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
li {
height: auto;
position: relative;
margin: 15px 8px 0;
.loading-style {
position: absolute;
z-index: 9999;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
img {
height: auto;
}
span {
width: 20px;
height: 20px;
display: inline-block;
position: absolute;
top: -27px;
right: -22px;
z-index: 10;
cursor: pointer;
}
}
}
</style>