ZheJiangNingBo
/
pingAnQiYeWeb
7
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

update

Browse Source
liwei
loveflow 8 months ago
parent 696646ebb7
commit 906be35657
2 changed files with 509 additions and 430 deletions
Show Stats Download Patch File Download Diff File

2
public/static/config.js
Unescape View File

@ -19,6 +19,6 @@ window.$TOKEN = {
}; };
window.$SERVICE = { window.$SERVICE = {
BASEURL:"http://121.41.91.94:8080/zhapi" BASEURL:"http://1.94.45.26:10045/zhapi"
//BASEURL: "http://1.94.45.26:10006/zhapi", //后端服务地址 //BASEURL: "http://1.94.45.26:10006/zhapi", //后端服务地址
}; };

937
src/components/upload.vue
Unescape View File

@ -1,483 +1,562 @@
<template> <template>
<div class="img-upload-container"> <div class="img-upload-container">
<div class="img-upload" :class="{ 'limit-num': fileList.length >= limit, 'mini': size === 'small' }"> <div
<el-upload class="avatar-uploader" ref="upload" :action="url" :headers="{ 'Authorization': token }" class="img-upload"
:file-list="fileList" list-type="picture-card" :on-success="handleSuccess" :on-remove="handleRemove" :class="{ 'limit-num': fileList.length >= limit, mini: size === 'small' }"
:data="{ fileType, villageCode }" :limit="1" :on-preview="handlePictureCardPreview" >
:before-upload="beforeAvatarUpload"> <el-upload
<i class="el-icon-plus"></i> class="avatar-uploader"
<p class="el-upload__tip" slot="tip" v-if="tips">{{ tips }}</p> ref="upload"
<p class="el-upload__tip" slot="tip" v-if="tips2">{{ tips2 }}</p> :action="url"
<div slot="file" slot-scope="{file}" class="img-con"> :headers="{ Authorization: token }"
<img class="el-upload-list__item-thumbnail" :src="file.url" alt=""> :file-list="fileList"
<span class="el-upload-list__item-actions"> list-type="picture-card"
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)"> :on-success="handleSuccess"
<i class="el-icon-zoom-in"></i> :on-remove="handleRemove"
</span> :data="{ fileType, villageCode }"
<span class="el-upload-list__item-delete" @click="handleRemove(file)"> :limit="1"
<i class="el-icon-delete"></i> :on-preview="handlePictureCardPreview"
</span> :before-upload="beforeAvatarUpload"
<span v-if="size === 'small'" style="display:block;marginLeft:0" class="el-upload-list__item-delete" >
@click="onChangeHandle(file)"> <i class="el-icon-plus"></i>
<i class="el-icon-edit"></i> <p class="el-upload__tip" slot="tip" v-if="tips">{{ tips }}</p>
</span> <p class="el-upload__tip" slot="tip" v-if="tips2">{{ tips2 }}</p>
<span v-else class="el-upload-list__item-delete" @click="onChangeHandle(file)"> <div slot="file" slot-scope="{ file }" class="img-con">
<i class="el-icon-edit"></i> <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
</span> <span class="el-upload-list__item-actions">
</span> <span
</div> class="el-upload-list__item-preview"
</el-upload> @click="handlePictureCardPreview(file)"
>
<el-dialog :visible.sync="dialogVisible"> <i class="el-icon-zoom-in"></i>
<img width="100%" append-to-body :src="dialogImageUrl" alt /> </span>
</el-dialog> <span
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
<span
v-if="size === 'small'"
style="display: block; marginleft: 0"
class="el-upload-list__item-delete"
@click="onChangeHandle(file)"
>
<i class="el-icon-edit"></i>
</span>
<span
v-else
class="el-upload-list__item-delete"
@click="onChangeHandle(file)"
>
<i class="el-icon-edit"></i>
</span>
</span>
</div> </div>
</el-upload>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" append-to-body :src="dialogImageUrl" alt />
</el-dialog>
</div> </div>
</div>
</template> </template>
<script> <script>
import { getToken } from '@/utils/auth' import { getToken } from "@/utils/auth";
export default { export default {
name: 'ImgUpload', name: "ImgUpload",
componentName: 'ImgUpload', componentName: "ImgUpload",
data() { data() {
return { return {
imgWidth: 0, imgWidth: 0,
imgHeight: 0, imgHeight: 0,
// url: `http://${window.location.host}/hjapi/common/upload`, // 图片上传接口地址 // url: `http://${window.location.host}/hjapi/common/upload`, // 图片上传接口地址
url: `http://192.168.0.188:8118/zhapi/common/upload`, // 图片上传接口地址 url: `http://192.168.0.188:8118/zhapi/common/upload`, // 图片上传接口地址
fileList: [], fileList: [],
dialogImageUrl: '', dialogImageUrl: "",
dialogVisible: false, dialogVisible: false,
picIndex: -1, picIndex: -1,
vmodelType: '', vmodelType: "",
token: '', token: "",
villageData: {}, villageData: {},
imageUrl: '' imageUrl: "",
} };
},
props: {
value: {
type: [String, Array],
}, },
props: { tips: {
value: { type: String,
type: [String, Array] default: "",
}, },
tips: { tips2: {
type: String, type: String,
default: '' default: "",
}, },
tips2: { size: {
type: String, type: String,
default: '' default: "medium", // small
}, },
size: { limit: {
type: String, type: Number,
default: 'medium' // small default: 2,
}, },
limit: { limitSize: {
type: Number, type: Number,
default: 2 default: 10,
}, },
limitSize: { valueType: {
type: Number, type: String,
default: 10 default: "String", // Object
}, },
valueType: { // 是否校验图片尺寸，默认不校验
type: String, isCheckPicSize: {
default: 'String' // Object type: Boolean,
}, default: false,
// 是否校验图片尺寸，默认不校验 },
isCheckPicSize: { checkWidth: {
type: Boolean, type: Number,
default: false default: 0, // 图片限制宽度
}, },
checkWidth: { checkHeight: {
type: Number, type: Number,
default: 0 // 图片限制宽度 default: 0, // 图片限制高度
}, },
checkHeight: { topLimitWidth: {
type: Number, type: Number,
default: 0 // 图片限制高度 default: 0, // 图片限制宽度上限（有时需要校验上传图片宽度在一个范围内）
}, },
topLimitWidth: { topLimitHeight: {
type: Number, type: Number,
default: 0 // 图片限制宽度上限（有时需要校验上传图片宽度在一个范围内） default: 0, // 图片限制高度上限（有时需要校验上传图片高度在一个范围内）
}, },
topLimitHeight: { busiType: {
type: Number, type: Number,
default: 0 // 图片限制高度上限（有时需要校验上传图片高度在一个范围内） default: 2,
}, },
busiType: { index: {
type: Number, type: Number,
default: 2 default: -1, // 当前图片index，限制可以上传多张时，针对某一张进行操作，需要知道当前的index
}, },
index: { limitType: {
type: Number, type: String,
default: -1 // 当前图片index，限制可以上传多张时，针对某一张进行操作，需要知道当前的index default: "", // gif,webp/gif/webp （限制上传格式）
},
limitType: {
type: String,
default: '' // gif,webp/gif/webp （限制上传格式）
},
fileType: {
type: String,
default: 'userpic'
},
villageCode: {
default: ''
}
}, },
watch: { fileType: {
value: { type: String,
deep: true, default: "userpic",
handler: function (val) { },
if (val) { villageCode: {
if (this.valueType === 'Object') { default: "",
this.fileList = this.value.map(item => ({ id: item.id, url: item.url, name: item.name })) },
} else { },
if (this.vmodelType === 'array') { watch: {
this.fileList = this.value.map(item => ({ url: item })) value: {
} else { deep: true,
this.fileList = [{ url: val }] handler: function (val) {
} if (val) {
} if (this.valueType === "Object") {
} else { this.fileList = this.value.map((item) => ({
this.fileList = [] id: item.id,
} url: item.url,
name: item.name,
}));
} else {
if (this.vmodelType === "array") {
this.fileList = this.value.map((item) => ({ url: item }));
} else {
this.fileList = [{ url: val }];
} }
}
} else {
this.fileList = [];
} }
},
}, },
created() { },
this.agetToken() created() {
if (this.valueType === 'Object') { this.agetToken();
this.vmodelType = 'array' if (this.valueType === "Object") {
this.vmodelType = "array";
} else {
const res = this.isString(this.value);
if (res === true) {
this.vmodelType = "string";
} else {
this.vmodelType = "array";
}
}
// console.log('created vmodelType', this.vmodelType)
if (this.value) {
if (this.valueType === "Object") {
this.fileList = this.value.map((item) => ({
id: item.id ? item.id : "",
url: item.url,
name: item.name,
}));
} else {
if (this.vmodelType === "array") {
this.fileList = this.value.map((item) => ({ url: item }));
} else { } else {
const res = this.isString(this.value) this.fileList = [{ url: this.value }];
if (res === true) {
this.vmodelType = 'string'
} else {
this.vmodelType = 'array'
}
} }
// console.log('created vmodelType', this.vmodelType) }
if (this.value) { }
if (this.valueType === 'Object') { },
this.fileList = this.value.map(item => ({ mounted() {},
id: item.id ? item.id : '', methods: {
url: item.url, agetToken() {
name: item.name this.token = "Bearer " + getToken();
})) },
} else { findItem(uid) {
if (this.vmodelType === 'array') { this.fileList.forEach((ele, i) => {
this.fileList = this.value.map(item => ({ url: item })) if (uid === ele.uid) {
} else { this.picIndex = i;
this.fileList = [{ url: this.value }]
}
}
} }
});
}, },
mounted() { onChangeHandle(file) {
// console.log('onChangeHandle', file, this.fileList)
this.findItem(file.uid);
this.$refs.upload.$refs["upload-inner"].handleClick();
}, },
methods: { beforeAvatarUpload(file) {
agetToken() { const imgType = file.type;
this.token = 'Bearer ' + getToken() const isLtSize = file.size / 1024 / 1024 < this.limitSize;
}, const TYPE_NOGIFWEBP = ["image/png", "image/jpeg", "image/jpg"];
findItem(uid) { const TYPE_NOGIF = ["image/png", "image/jpeg", "image/jpg", "image/webp"];
this.fileList.forEach((ele, i) => { const TYPE_NOWEBP = ["image/png", "image/jpeg", "image/jpg", "image/gif"];
if (uid === ele.uid) { const TYPE_ALL = [
this.picIndex = i "image/png",
} "image/jpeg",
}) "image/jpg",
}, "image/gif",
onChangeHandle(file) { "image/webp",
// console.log('onChangeHandle', file, this.fileList) ];
this.findItem(file.uid) let isType = true;
this.$refs.upload.$refs['upload-inner'].handleClick() if (
}, this.limitType &&
beforeAvatarUpload(file) { this.limitType.indexOf("gif") !== -1 &&
const imgType = file.type this.limitType.indexOf("webp") !== -1
const isLtSize = file.size / 1024 / 1024 < this.limitSize ) {
const TYPE_NOGIFWEBP = ['image/png', 'image/jpeg', 'image/jpg'] if (TYPE_NOGIFWEBP.indexOf(imgType) === -1) {
const TYPE_NOGIF = ['image/png', 'image/jpeg', 'image/jpg', 'image/webp'] isType = false;
const TYPE_NOWEBP = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif'] this.$message.error(
const TYPE_ALL = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/webp'] "仅支持上传 jpg、png、jpeg、gif、webp 格式的图片!"
let isType = true );
if (this.limitType && this.limitType.indexOf('gif') !== -1 && this.limitType.indexOf('webp') !== -1) { }
if (TYPE_NOGIFWEBP.indexOf(imgType) === -1) { } else if (
isType = false this.limitType &&
this.$message.error('仅支持上传 jpg、png、jpeg、gif、webp 格式的图片!') this.limitType.indexOf("gif") === -1 &&
} this.limitType.indexOf("webp") === -1
} else if (this.limitType && this.limitType.indexOf('gif') === -1 && this.limitType.indexOf('webp') === -1) { ) {
if (TYPE_NOGIFWEBP.indexOf(imgType) === -1) { if (TYPE_NOGIFWEBP.indexOf(imgType) === -1) {
isType = false isType = false;
this.$message.error('仅支持上传 jpg、png、jpeg 格式的图片!') this.$message.error("仅支持上传 jpg、png、jpeg 格式的图片!");
} }
} else if (this.limitType && this.limitType.indexOf('webp') !== -1) { } else if (this.limitType && this.limitType.indexOf("webp") !== -1) {
if (TYPE_NOGIF.indexOf(imgType) === -1) { if (TYPE_NOGIF.indexOf(imgType) === -1) {
isType = false isType = false;
this.$message.error('仅支持上传 jpg、png、jpeg、webp 格式的图片!') this.$message.error("仅支持上传 jpg、png、jpeg、webp 格式的图片!");
} }
} else if (this.limitType && this.limitType.indexOf('gif') !== -1) { } else if (this.limitType && this.limitType.indexOf("gif") !== -1) {
if (TYPE_NOWEBP.indexOf(imgType) === -1) { if (TYPE_NOWEBP.indexOf(imgType) === -1) {
isType = false isType = false;
this.$message.error('仅支持上传 jpg、png、jpeg、gif 格式的图片!') this.$message.error("仅支持上传 jpg、png、jpeg、gif 格式的图片!");
} }
} else { } else {
if (TYPE_ALL.indexOf(imgType) === -1) { if (TYPE_ALL.indexOf(imgType) === -1) {
isType = false isType = false;
this.$message.error('仅支持上传 jpg、png、jpeg、webp、gif 格式的图片!') this.$message.error(
} "仅支持上传 jpg、png、jpeg、webp、gif 格式的图片!"
} );
}
}
if (!isLtSize) { if (!isLtSize) {
this.$message.error(`上传图片大小不能超过${this.limitSize}MB!`) this.$message.error(`上传图片大小不能超过${this.limitSize}MB!`);
}
if (this.isCheckPicSize === true) {
const width = this.checkWidth;
const height = this.checkHeight;
const topWidth = this.topLimitWidth;
const topHeight = this.topLimitHeight;
const that = this;
const isSize = new Promise((resolve, reject) => {
// window对象，将blob或file读取成一个url
const _URL = window.URL || window.webkitURL;
const img = new Image();
// image对象的onload事件，当图片加载完成后执行的函数
img.onload = () => {
that.imgWidth = img.width;
that.imgHeight = img.height;
if (width && height) {
// 校验图片的宽度和高度
let valid = false;
if (topWidth && topHeight) {
// 校验图片宽度和高度范围
valid =
width <= img.width &&
img.width <= topWidth &&
height <= img.height &&
img.height <= topHeight;
} else if (topHeight) {
// 校验图片高度范围
valid =
img.width === width &&
height <= img.height &&
img.height <= topHeight;
} else if (topWidth) {
// 校验图片宽度范围
valid =
width <= img.width &&
img.width <= topWidth &&
img.height === height;
} else {
// 校验图片宽度、高度固定值
valid = img.width === width && height === img.height;
}
valid ? resolve() : reject(new Error("error"));
} else if (width) {
// 只校验图片的宽度
let valid = false;
if (topWidth) {
// 校验图片宽度范围
valid = width <= img.width && img.width <= topWidth;
} else {
// 校验图片宽度固定值
valid = img.width === width;
}
valid ? resolve() : reject(new Error("error"));
} }
if (this.isCheckPicSize === true) { if (height) {
const width = this.checkWidth // 只校验图片的高度
const height = this.checkHeight let valid = false;
const topWidth = this.topLimitWidth if (topHeight) {
const topHeight = this.topLimitHeight // 校验图片高度范围
const that = this valid = height <= img.height && img.height <= topHeight;
const isSize = new Promise((resolve, reject) => { } else {
// window对象，将blob或file读取成一个url // 校验图片高度固定值
const _URL = window.URL || window.webkitURL valid = img.height === height;
const img = new Image() }
// image对象的onload事件，当图片加载完成后执行的函数 valid ? resolve() : reject(new Error("error"));
img.onload = () => {
that.imgWidth = img.width
that.imgHeight = img.height
if (width && height) { // 校验图片的宽度和高度
let valid = false
if (topWidth && topHeight) {
// 校验图片宽度和高度范围
valid = ((width <= img.width) && (img.width <= topWidth)) && ((height <= img.height) && (img.height <= topHeight))
} else if (topHeight) {
// 校验图片高度范围
valid = img.width === width && ((height <= img.height) && (img.height <= topHeight))
} else if (topWidth) {
// 校验图片宽度范围
valid = ((width <= img.width) && (img.width <= topWidth)) && img.height === height
} else {
// 校验图片宽度、高度固定值
valid = img.width === width && height === img.height
}
valid ? resolve() : reject(new Error('error'))
} else if (width) { // 只校验图片的宽度
let valid = false
if (topWidth) {
// 校验图片宽度范围
valid = (width <= img.width) && (img.width <= topWidth)
} else {
// 校验图片宽度固定值
valid = img.width === width
}
valid ? resolve() : reject(new Error('error'))
} if (height) { // 只校验图片的高度
let valid = false
if (topHeight) {
// 校验图片高度范围
valid = (height <= img.height) && (img.height <= topHeight)
} else {
// 校验图片高度固定值
valid = img.height === height
}
valid ? resolve() : reject(new Error('error'))
}
}
img.src = _URL.createObjectURL(file)
}).then(() => {
return file
}, () => {
let text = ''
if (width && height) {
if (topWidth && topHeight) {
text = `图片尺寸限制为：宽度${width}~${topWidth}px，高度${height}~${topHeight}px！`
} else if (topHeight) {
text = `图片尺寸限制为：宽度${width}px，高度${height}~${topHeight}px！`
} else if (topWidth) {
text = `图片尺寸限制为：宽度${width}~${topWidth}px，高度${height}px！`
} else {
text = `图片尺寸限制为：宽度${width}px，高度${height}px！`
}
} else if (width) {
if (topWidth) {
text = `图片尺寸限制为：宽度${width}~${topWidth}px！`
} else {
text = `图片尺寸限制为：宽度${width}px！`
}
} else if (height) {
if (topHeight) {
text = `图片尺寸限制为：高度${height}~${topHeight}px！`
} else {
text = `图片尺寸限制为：高度${height}px！`
}
}
this.$message.error(text)
return Promise.reject(new Error('error'))
})
return isType && isLtSize && isSize
} else {
// window对象，将blob或file读取成一个url
const _URL = window.URL || window.webkitURL
const img = new Image()
img.onload = () => { // image对象的onload事件，当图片加载完成后执行的函数
this.imgWidth = img.width
this.imgHeight = img.height
// console.log('getWidthAndHeight', this.imgWidth, this.imgHeight)
}
img.src = _URL.createObjectURL(file)
return isType && isLtSize
} }
}, };
// 判断是否是String img.src = _URL.createObjectURL(file);
isString(str) { }).then(
return ((str instanceof String) || (typeof str).toLowerCase() === 'string') () => {
}, return file;
handleRemove(file) { },
this.findItem(file.uid) () => {
this.fileList.splice(this.picIndex, 1) let text = "";
// fileList = JSON.parse(JSON.stringify(this.fileList)) if (width && height) {
// this.exportImg(fileList) if (topWidth && topHeight) {
}, text = `图片尺寸限制为：宽度${width}~${topWidth}px，高度${height}~${topHeight}px！`;
handleSuccess(res, file, fileList) { } else if (topHeight) {
text = `图片尺寸限制为：宽度${width}px，高度${height}~${topHeight}px！`;
} else if (topWidth) {
console.log(fileList, 'success'); text = `图片尺寸限制为：宽度${width}~${topWidth}px，高度${height}px！`;
console.log(this.picIndex, 'this.picIndex'); } else {
if (this.picIndex !== -1) { text = `图片尺寸限制为：宽度${width}px，高度${height}px！`;
fileList.splice(this.picIndex, 1) }
} else if (width) {
if (topWidth) {
text = `图片尺寸限制为：宽度${width}~${topWidth}px！`;
} else {
text = `图片尺寸限制为：宽度${width}px！`;
}
} else if (height) {
if (topHeight) {
text = `图片尺寸限制为：高度${height}~${topHeight}px！`;
} else {
text = `图片尺寸限制为：高度${height}px！`;
}
} }
// this.exportImg(fileList) this.$message.error(text);
console.log(res.url, 'res.url'); return Promise.reject(new Error("error"));
this.imageUrl = res.url }
this.$emit('upSuccess', res.url) );
}, return isType && isLtSize && isSize;
handleError(err) { } else {
this.$message.error(err) // window对象，将blob或file读取成一个url
}, const _URL = window.URL || window.webkitURL;
handlePictureCardPreview(file) { const img = new Image();
this.dialogImageUrl = file.url img.onload = () => {
this.dialogVisible = true // image对象的onload事件，当图片加载完成后执行的函数
}, this.imgWidth = img.width;
exportImg(fileList = []) { this.imgHeight = img.height;
// console.log('exportImg fileList', fileList) // console.log('getWidthAndHeight', this.imgWidth, this.imgHeight)
this.fileList = fileList };
if (fileList.length !== 0) { img.src = _URL.createObjectURL(file);
if (this.valueType === 'Object') { return isType && isLtSize;
const imgs = fileList.map(item => { }
if (item.response && item.response.result) { },
item.id = item.response.result[0].id // 判断是否是String
item.url = item.response.result[0].url + '&width=' + this.imgWidth + '&height=' + this.imgHeight isString(str) {
item.name = item.response.result[0].fileName return str instanceof String || (typeof str).toLowerCase() === "string";
} },
return { handleRemove(file) {
id: item.id, this.findItem(file.uid);
url: item.url, this.fileList.splice(this.picIndex, 1);
name: item.name // fileList = JSON.parse(JSON.stringify(this.fileList))
} // this.exportImg(fileList)
}) },
this.$emit('input', imgs) handleSuccess(res, file, fileList) {
// console.log('exportImg imgs', imgs) console.log(fileList, "success");
} else { console.log(this.picIndex, "this.picIndex");
if (this.vmodelType === 'array') { if (this.picIndex !== -1) {
const imgs = fileList.map(item => { fileList.splice(this.picIndex, 1);
if (item.response && item.response.result) { }
item.url = item.response.result[0].url + '&width=' + this.imgWidth + '&height=' + this.imgHeight // this.exportImg(fileList)
} console.log(res.url, "res.url");
return item.url this.imageUrl = res.url;
}) this.$emit("upSuccess", res.url);
this.$emit('input', imgs) },
// console.log('exportImg imgs', imgs) handleError(err) {
} else { this.$message.error(err);
const resUrl = fileList[0].response.result[0].url + '&width=' + this.imgWidth + '&height=' + this.imgHeight },
this.$emit('input', resUrl) handlePictureCardPreview(file) {
// console.log('exportImg resUrl', resUrl) this.dialogImageUrl = file.url;
} this.dialogVisible = true;
} },
} else { exportImg(fileList = []) {
this.$emit('input', '') // console.log('exportImg fileList', fileList)
this.fileList = fileList;
if (fileList.length !== 0) {
if (this.valueType === "Object") {
const imgs = fileList.map((item) => {
if (item.response && item.response.result) {
item.id = item.response.result[0].id;
item.url =
item.response.result[0].url +
"&width=" +
this.imgWidth +
"&height=" +
this.imgHeight;
item.name = item.response.result[0].fileName;
} }
this.picIndex = -1 return {
id: item.id,
url: item.url,
name: item.name,
};
});
this.$emit("input", imgs);
// console.log('exportImg imgs', imgs)
} else {
if (this.vmodelType === "array") {
const imgs = fileList.map((item) => {
if (item.response && item.response.result) {
item.url =
item.response.result[0].url +
"&width=" +
this.imgWidth +
"&height=" +
this.imgHeight;
}
return item.url;
});
this.$emit("input", imgs);
// console.log('exportImg imgs', imgs)
} else {
const resUrl =
fileList[0].response.result[0].url +
"&width=" +
this.imgWidth +
"&height=" +
this.imgHeight;
this.$emit("input", resUrl);
// console.log('exportImg resUrl', resUrl)
}
} }
} } else {
} this.$emit("input", "");
}
this.picIndex = -1;
},
},
};
</script> </script>
<style lang='less'> <style lang='less'>
@small-size: 80px; @small-size: 80px;
.img-upload&&.limit-num { .img-upload&&.limit-num {
.el-upload--picture-card { .el-upload--picture-card {
display: none !important; display: none !important;
} }
} }
.el-upload--picture-card { .el-upload--picture-card {
background: url("~@/assets/companyFile/uploadicon.png") center no-repeat !important; background: url("~@/assets/companyFile/uploadicon.png") center no-repeat !important;
background-size: 40% 40% !important; background-size: 40% 40% !important;
.el-icon-plus { .el-icon-plus {
display: none; display: none;
} }
} }
.img-upload&&.mini { .img-upload&&.mini {
.el-upload { .el-upload {
border: 1px dashed #d9d9d9; border: 1px dashed #d9d9d9;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.el-upload-list__item { .el-upload-list__item {
width: @small-size; width: @small-size;
height: @small-size; height: @small-size;
text-align: center; text-align: center;
/*去除upload组件过渡效果*/ /*去除upload组件过渡效果*/
transition: none !important; transition: none !important;
} }
.el-upload--picture-card { .el-upload--picture-card {
width: @small-size; width: @small-size;
height: @small-size; height: @small-size;
line-height: @small-size; line-height: @small-size;
text-align: center; text-align: center;
} }
} }
.el-upload-list__item&&.is-success { .el-upload-list__item&&.is-success {
.img-con { .img-con {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.avatar-uploader .el-upload { .avatar-uploader .el-upload {
border: 1px dashed #d9d9d9; border: 1px dashed #d9d9d9;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
.avatar-uploader .el-upload:hover { .avatar-uploader .el-upload:hover {
border-color: #409eff; border-color: #409eff;
} }
.avatar-uploader-icon { .avatar-uploader-icon {
font-size: 28px; font-size: 28px;
position: relative; position: relative;
color: #8c939d; color: #8c939d;
width: 220px; width: 220px;
height: 220px; height: 220px;
background: url("~@/assets/companyFile/uploadicon.png") center no-repeat !important; background: url("~@/assets/companyFile/uploadicon.png") center no-repeat !important;
background-size: 40% 40% !important; background-size: 40% 40% !important;
div { div {
position: absolute; position: absolute;
top: 160px; top: 160px;
left: 16px; left: 16px;
font-size: 19px; font-size: 19px;
} }
} }
</style> </style>
Write Preview
Loading…
Cancel
Save