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", //后端服务地址
}; };

439
src/components/upload.vue
Unescape View File

@ -1,27 +1,54 @@
<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
class="avatar-uploader"
ref="upload"
:action="url"
:headers="{ Authorization: token }"
:file-list="fileList"
list-type="picture-card"
:on-success="handleSuccess"
:on-remove="handleRemove"
:data="{ fileType, villageCode }"
:limit="1"
:on-preview="handlePictureCardPreview"
:before-upload="beforeAvatarUpload"
>
<i class="el-icon-plus"></i> <i class="el-icon-plus"></i>
<p class="el-upload__tip" slot="tip" v-if="tips">{{ tips }}</p> <p class="el-upload__tip" slot="tip" v-if="tips">{{ tips }}</p>
<p class="el-upload__tip" slot="tip" v-if="tips2">{{ tips2 }}</p> <p class="el-upload__tip" slot="tip" v-if="tips2">{{ tips2 }}</p>
<div slot="file" slot-scope="{file}" class="img-con"> <div slot="file" slot-scope="{ file }" class="img-con">
<img class="el-upload-list__item-thumbnail" :src="file.url" alt=""> <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
<span class="el-upload-list__item-actions"> <span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)"> <span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<i class="el-icon-zoom-in"></i> <i class="el-icon-zoom-in"></i>
</span> </span>
<span class="el-upload-list__item-delete" @click="handleRemove(file)"> <span
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i> <i class="el-icon-delete"></i>
</span> </span>
<span v-if="size === 'small'" style="display:block;marginLeft:0" class="el-upload-list__item-delete" <span
@click="onChangeHandle(file)"> v-if="size === 'small'"
style="display: block; marginleft: 0"
class="el-upload-list__item-delete"
@click="onChangeHandle(file)"
>
<i class="el-icon-edit"></i> <i class="el-icon-edit"></i>
</span> </span>
<span v-else class="el-upload-list__item-delete" @click="onChangeHandle(file)"> <span
v-else
class="el-upload-list__item-delete"
@click="onChangeHandle(file)"
>
<i class="el-icon-edit"></i> <i class="el-icon-edit"></i>
</span> </span>
</span> </span>
@ -36,10 +63,10 @@
</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,
@ -47,358 +74,410 @@ export default {
// 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: { props: {
value: { value: {
type: [String, Array] type: [String, Array],
}, },
tips: { tips: {
type: String, type: String,
default: '' default: "",
}, },
tips2: { tips2: {
type: String, type: String,
default: '' default: "",
}, },
size: { size: {
type: String, type: String,
default: 'medium' // small default: "medium", // small
}, },
limit: { limit: {
type: Number, type: Number,
default: 2 default: 2,
}, },
limitSize: { limitSize: {
type: Number, type: Number,
default: 10 default: 10,
}, },
valueType: { valueType: {
type: String, type: String,
default: 'String' // Object default: "String", // Object
}, },
// 是否校验图片尺寸，默认不校验 // 是否校验图片尺寸，默认不校验
isCheckPicSize: { isCheckPicSize: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
checkWidth: { checkWidth: {
type: Number, type: Number,
default: 0 // 图片限制宽度 default: 0, // 图片限制宽度
}, },
checkHeight: { checkHeight: {
type: Number, type: Number,
default: 0 // 图片限制高度 default: 0, // 图片限制高度
}, },
topLimitWidth: { topLimitWidth: {
type: Number, type: Number,
default: 0 // 图片限制宽度上限（有时需要校验上传图片宽度在一个范围内） default: 0, // 图片限制宽度上限（有时需要校验上传图片宽度在一个范围内）
}, },
topLimitHeight: { topLimitHeight: {
type: Number, type: Number,
default: 0 // 图片限制高度上限（有时需要校验上传图片高度在一个范围内） default: 0, // 图片限制高度上限（有时需要校验上传图片高度在一个范围内）
}, },
busiType: { busiType: {
type: Number, type: Number,
default: 2 default: 2,
}, },
index: { index: {
type: Number, type: Number,
default: -1 // 当前图片index，限制可以上传多张时，针对某一张进行操作，需要知道当前的index default: -1, // 当前图片index，限制可以上传多张时，针对某一张进行操作，需要知道当前的index
}, },
limitType: { limitType: {
type: String, type: String,
default: '' // gif,webp/gif/webp （限制上传格式） default: "", // gif,webp/gif/webp （限制上传格式）
}, },
fileType: { fileType: {
type: String, type: String,
default: 'userpic' default: "userpic",
}, },
villageCode: { villageCode: {
default: '' default: "",
} },
}, },
watch: { watch: {
value: { value: {
deep: true, deep: true,
handler: function (val) { handler: function (val) {
if (val) { if (val) {
if (this.valueType === 'Object') { if (this.valueType === "Object") {
this.fileList = this.value.map(item => ({ id: item.id, url: item.url, name: item.name })) this.fileList = this.value.map((item) => ({
id: item.id,
url: item.url,
name: item.name,
}));
} else { } else {
if (this.vmodelType === 'array') { if (this.vmodelType === "array") {
this.fileList = this.value.map(item => ({ url: item })) this.fileList = this.value.map((item) => ({ url: item }));
} else { } else {
this.fileList = [{ url: val }] this.fileList = [{ url: val }];
} }
} }
} else { } else {
this.fileList = [] this.fileList = [];
}
}
} }
}, },
},
},
created() { created() {
this.agetToken() this.agetToken();
if (this.valueType === 'Object') { if (this.valueType === "Object") {
this.vmodelType = 'array' this.vmodelType = "array";
} else { } else {
const res = this.isString(this.value) const res = this.isString(this.value);
if (res === true) { if (res === true) {
this.vmodelType = 'string' this.vmodelType = "string";
} else { } else {
this.vmodelType = 'array' this.vmodelType = "array";
} }
} }
// console.log('created vmodelType', this.vmodelType) // console.log('created vmodelType', this.vmodelType)
if (this.value) { if (this.value) {
if (this.valueType === 'Object') { if (this.valueType === "Object") {
this.fileList = this.value.map(item => ({ this.fileList = this.value.map((item) => ({
id: item.id ? item.id : '', id: item.id ? item.id : "",
url: item.url, url: item.url,
name: item.name name: item.name,
})) }));
} else { } else {
if (this.vmodelType === 'array') { if (this.vmodelType === "array") {
this.fileList = this.value.map(item => ({ url: item })) this.fileList = this.value.map((item) => ({ url: item }));
} else { } else {
this.fileList = [{ url: this.value }] this.fileList = [{ url: this.value }];
} }
} }
} }
}, },
mounted() { mounted() {},
},
methods: { methods: {
agetToken() { agetToken() {
this.token = 'Bearer ' + getToken() this.token = "Bearer " + getToken();
}, },
findItem(uid) { findItem(uid) {
this.fileList.forEach((ele, i) => { this.fileList.forEach((ele, i) => {
if (uid === ele.uid) { if (uid === ele.uid) {
this.picIndex = i this.picIndex = i;
} }
}) });
}, },
onChangeHandle(file) { onChangeHandle(file) {
// console.log('onChangeHandle', file, this.fileList) // console.log('onChangeHandle', file, this.fileList)
this.findItem(file.uid) this.findItem(file.uid);
this.$refs.upload.$refs['upload-inner'].handleClick() this.$refs.upload.$refs["upload-inner"].handleClick();
}, },
beforeAvatarUpload(file) { beforeAvatarUpload(file) {
const imgType = file.type const imgType = file.type;
const isLtSize = file.size / 1024 / 1024 < this.limitSize const isLtSize = file.size / 1024 / 1024 < this.limitSize;
const TYPE_NOGIFWEBP = ['image/png', 'image/jpeg', 'image/jpg'] const TYPE_NOGIFWEBP = ["image/png", "image/jpeg", "image/jpg"];
const TYPE_NOGIF = ['image/png', 'image/jpeg', 'image/jpg', 'image/webp'] const TYPE_NOGIF = ["image/png", "image/jpeg", "image/jpg", "image/webp"];
const TYPE_NOWEBP = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif'] const TYPE_NOWEBP = ["image/png", "image/jpeg", "image/jpg", "image/gif"];
const TYPE_ALL = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif', 'image/webp'] const TYPE_ALL = [
let isType = true "image/png",
if (this.limitType && this.limitType.indexOf('gif') !== -1 && this.limitType.indexOf('webp') !== -1) { "image/jpeg",
"image/jpg",
"image/gif",
"image/webp",
];
let isType = true;
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、gif、webp 格式的图片!') this.$message.error(
} "仅支持上传 jpg、png、jpeg、gif、webp 格式的图片!"
} else if (this.limitType && 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) { if (this.isCheckPicSize === true) {
const width = this.checkWidth const width = this.checkWidth;
const height = this.checkHeight const height = this.checkHeight;
const topWidth = this.topLimitWidth const topWidth = this.topLimitWidth;
const topHeight = this.topLimitHeight const topHeight = this.topLimitHeight;
const that = this const that = this;
const isSize = new Promise((resolve, reject) => { const isSize = new Promise((resolve, reject) => {
// window对象，将blob或file读取成一个url // window对象，将blob或file读取成一个url
const _URL = window.URL || window.webkitURL const _URL = window.URL || window.webkitURL;
const img = new Image() const img = new Image();
// image对象的onload事件，当图片加载完成后执行的函数 // image对象的onload事件，当图片加载完成后执行的函数
img.onload = () => { img.onload = () => {
that.imgWidth = img.width that.imgWidth = img.width;
that.imgHeight = img.height that.imgHeight = img.height;
if (width && height) { // 校验图片的宽度和高度 if (width && height) {
let valid = false // 校验图片的宽度和高度
let valid = false;
if (topWidth && topHeight) { if (topWidth && topHeight) {
// 校验图片宽度和高度范围 // 校验图片宽度和高度范围
valid = ((width <= img.width) && (img.width <= topWidth)) && ((height <= img.height) && (img.height <= topHeight)) valid =
width <= img.width &&
img.width <= topWidth &&
height <= img.height &&
img.height <= topHeight;
} else if (topHeight) { } else if (topHeight) {
// 校验图片高度范围 // 校验图片高度范围
valid = img.width === width && ((height <= img.height) && (img.height <= topHeight)) valid =
img.width === width &&
height <= img.height &&
img.height <= topHeight;
} else if (topWidth) { } else if (topWidth) {
// 校验图片宽度范围 // 校验图片宽度范围
valid = ((width <= img.width) && (img.width <= topWidth)) && img.height === height valid =
width <= img.width &&
img.width <= topWidth &&
img.height === height;
} else { } else {
// 校验图片宽度、高度固定值 // 校验图片宽度、高度固定值
valid = img.width === width && height === img.height valid = img.width === width && height === img.height;
} }
valid ? resolve() : reject(new Error('error')) valid ? resolve() : reject(new Error("error"));
} else if (width) { // 只校验图片的宽度 } else if (width) {
let valid = false // 只校验图片的宽度
let valid = false;
if (topWidth) { if (topWidth) {
// 校验图片宽度范围 // 校验图片宽度范围
valid = (width <= img.width) && (img.width <= topWidth) valid = width <= img.width && img.width <= topWidth;
} else { } else {
// 校验图片宽度固定值 // 校验图片宽度固定值
valid = img.width === width valid = img.width === width;
}
valid ? resolve() : reject(new Error("error"));
} }
valid ? resolve() : reject(new Error('error')) if (height) {
} if (height) { // 只校验图片的高度 // 只校验图片的高度
let valid = false let valid = false;
if (topHeight) { if (topHeight) {
// 校验图片高度范围 // 校验图片高度范围
valid = (height <= img.height) && (img.height <= topHeight) valid = height <= img.height && img.height <= topHeight;
} else { } else {
// 校验图片高度固定值 // 校验图片高度固定值
valid = img.height === height valid = img.height === height;
}
valid ? resolve() : reject(new Error('error'))
} }
valid ? resolve() : reject(new Error("error"));
} }
img.src = _URL.createObjectURL(file) };
}).then(() => { img.src = _URL.createObjectURL(file);
return file }).then(
}, () => { () => {
let text = '' return file;
},
() => {
let text = "";
if (width && height) { if (width && height) {
if (topWidth && topHeight) { if (topWidth && topHeight) {
text = `图片尺寸限制为：宽度${width}~${topWidth}px，高度${height}~${topHeight}px！` text = `图片尺寸限制为：宽度${width}~${topWidth}px，高度${height}~${topHeight}px！`;
} else if (topHeight) { } else if (topHeight) {
text = `图片尺寸限制为：宽度${width}px，高度${height}~${topHeight}px！` text = `图片尺寸限制为：宽度${width}px，高度${height}~${topHeight}px！`;
} else if (topWidth) { } else if (topWidth) {
text = `图片尺寸限制为：宽度${width}~${topWidth}px，高度${height}px！` text = `图片尺寸限制为：宽度${width}~${topWidth}px，高度${height}px！`;
} else { } else {
text = `图片尺寸限制为：宽度${width}px，高度${height}px！` text = `图片尺寸限制为：宽度${width}px，高度${height}px！`;
} }
} else if (width) { } else if (width) {
if (topWidth) { if (topWidth) {
text = `图片尺寸限制为：宽度${width}~${topWidth}px！` text = `图片尺寸限制为：宽度${width}~${topWidth}px！`;
} else { } else {
text = `图片尺寸限制为：宽度${width}px！` text = `图片尺寸限制为：宽度${width}px！`;
} }
} else if (height) { } else if (height) {
if (topHeight) { if (topHeight) {
text = `图片尺寸限制为：高度${height}~${topHeight}px！` text = `图片尺寸限制为：高度${height}~${topHeight}px！`;
} else { } else {
text = `图片尺寸限制为：高度${height}px！` text = `图片尺寸限制为：高度${height}px！`;
}
} }
this.$message.error(text);
return Promise.reject(new Error("error"));
} }
this.$message.error(text) );
return Promise.reject(new Error('error')) return isType && isLtSize && isSize;
})
return isType && isLtSize && isSize
} else { } else {
// window对象，将blob或file读取成一个url // window对象，将blob或file读取成一个url
const _URL = window.URL || window.webkitURL const _URL = window.URL || window.webkitURL;
const img = new Image() const img = new Image();
img.onload = () => { // image对象的onload事件，当图片加载完成后执行的函数 img.onload = () => {
this.imgWidth = img.width // image对象的onload事件，当图片加载完成后执行的函数
this.imgHeight = img.height this.imgWidth = img.width;
this.imgHeight = img.height;
// console.log('getWidthAndHeight', this.imgWidth, this.imgHeight) // console.log('getWidthAndHeight', this.imgWidth, this.imgHeight)
} };
img.src = _URL.createObjectURL(file) img.src = _URL.createObjectURL(file);
return isType && isLtSize return isType && isLtSize;
} }
}, },
// 判断是否是String // 判断是否是String
isString(str) { isString(str) {
return ((str instanceof String) || (typeof str).toLowerCase() === 'string') return str instanceof String || (typeof str).toLowerCase() === "string";
}, },
handleRemove(file) { handleRemove(file) {
this.findItem(file.uid) this.findItem(file.uid);
this.fileList.splice(this.picIndex, 1) this.fileList.splice(this.picIndex, 1);
// fileList = JSON.parse(JSON.stringify(this.fileList)) // fileList = JSON.parse(JSON.stringify(this.fileList))
// this.exportImg(fileList) // this.exportImg(fileList)
}, },
handleSuccess(res, file, fileList) { handleSuccess(res, file, fileList) {
console.log(fileList, "success");
console.log(this.picIndex, "this.picIndex");
console.log(fileList, 'success');
console.log(this.picIndex, 'this.picIndex');
if (this.picIndex !== -1) { if (this.picIndex !== -1) {
fileList.splice(this.picIndex, 1) fileList.splice(this.picIndex, 1);
} }
// this.exportImg(fileList) // this.exportImg(fileList)
console.log(res.url, 'res.url'); console.log(res.url, "res.url");
this.imageUrl = res.url this.imageUrl = res.url;
this.$emit('upSuccess', res.url) this.$emit("upSuccess", res.url);
}, },
handleError(err) { handleError(err) {
this.$message.error(err) this.$message.error(err);
}, },
handlePictureCardPreview(file) { handlePictureCardPreview(file) {
this.dialogImageUrl = file.url this.dialogImageUrl = file.url;
this.dialogVisible = true this.dialogVisible = true;
}, },
exportImg(fileList = []) { exportImg(fileList = []) {
// console.log('exportImg fileList', fileList) // console.log('exportImg fileList', fileList)
this.fileList = fileList this.fileList = fileList;
if (fileList.length !== 0) { if (fileList.length !== 0) {
if (this.valueType === 'Object') { if (this.valueType === "Object") {
const imgs = fileList.map(item => { const imgs = fileList.map((item) => {
if (item.response && item.response.result) { if (item.response && item.response.result) {
item.id = item.response.result[0].id item.id = item.response.result[0].id;
item.url = item.response.result[0].url + '&width=' + this.imgWidth + '&height=' + this.imgHeight item.url =
item.name = item.response.result[0].fileName item.response.result[0].url +
"&width=" +
this.imgWidth +
"&height=" +
this.imgHeight;
item.name = item.response.result[0].fileName;
} }
return { return {
id: item.id, id: item.id,
url: item.url, url: item.url,
name: item.name name: item.name,
} };
}) });
this.$emit('input', imgs) this.$emit("input", imgs);
// console.log('exportImg imgs', imgs) // console.log('exportImg imgs', imgs)
} else { } else {
if (this.vmodelType === 'array') { if (this.vmodelType === "array") {
const imgs = fileList.map(item => { const imgs = fileList.map((item) => {
if (item.response && item.response.result) { if (item.response && item.response.result) {
item.url = item.response.result[0].url + '&width=' + this.imgWidth + '&height=' + this.imgHeight item.url =
} item.response.result[0].url +
return item.url "&width=" +
}) this.imgWidth +
this.$emit('input', imgs) "&height=" +
this.imgHeight;
}
return item.url;
});
this.$emit("input", imgs);
// console.log('exportImg imgs', imgs) // console.log('exportImg imgs', imgs)
} else { } else {
const resUrl = fileList[0].response.result[0].url + '&width=' + this.imgWidth + '&height=' + this.imgHeight const resUrl =
this.$emit('input', resUrl) fileList[0].response.result[0].url +
"&width=" +
this.imgWidth +
"&height=" +
this.imgHeight;
this.$emit("input", resUrl);
// console.log('exportImg resUrl', resUrl) // console.log('exportImg resUrl', resUrl)
} }
} }
} else { } else {
this.$emit('input', '') this.$emit("input", "");
}
this.picIndex = -1
}
} }
} this.picIndex = -1;
},
},
};
</script> </script>
<style lang='less'> <style lang='less'>

Write Preview
Loading…
Cancel
Save