Browse Source

首页上传图片限制大小,上传图片宽度自适应

master
pzy 3 years ago
parent
commit
5ad4768985
  1. 19
      src/utils/get-img-width.js
  2. 249
      src/views/ad/index.vue
  3. 8
      src/views/article/index.vue

19
src/utils/get-img-width.js

@ -1,7 +1,7 @@
import { Message } from 'element-ui'
export default function (file, id) {
let width = 0;
let height = 0;
let width = null;
let height = null;
switch (id) {
case 23: //深度解说
width = 650;
@ -23,6 +23,14 @@ export default function (file, id) {
width = 380;
height = 220;
break;
case 'bigSwiper': //首页大轮播
width = 1920;
height = 960;
break;
case 'smallSwiper': //首页小轮播
width = 722;
height = 406;
break;
};
return new Promise(resolve => {
let reader = new FileReader();
@ -32,7 +40,7 @@ export default function (file, id) {
let img = document.createElement("img");
img.src = txt;
img.onload = function () {
console.log(id, width, height);
// console.log(id, width, height);
if (width && height) {
if (img.width === width && img.height === height) {
resolve(true)
@ -51,8 +59,3 @@ export default function (file, id) {
};
})
}
// 1. 650 350
// 1. 650 350
// 1. 650 350
// 1. 650 350
// 1. 650 350

249
src/views/ad/index.vue

@ -6,7 +6,8 @@
type="primary"
icon="el-icon-edit"
@click="handleCreate"
>添加资讯</el-button>
>添加资讯</el-button
>
</div>
<el-table
:key="tableKey"
@ -15,47 +16,58 @@
border
fit
highlight-current-row
style="width: 100%;"
style="width: 100%"
>
<el-table-column label="ID" prop="id" align="center">
<template slot-scope="{row}">
<template slot-scope="{ row }">
<span>{{ row.news_id }}</span>
</template>
</el-table-column>
<el-table-column label="分类" align="center">
<template slot-scope="{row}">
<template slot-scope="{ row }">
<span>{{ row.static | getStaticName(statics) }}</span>
</template>
</el-table-column>
<el-table-column label="标题" align="center">
<template slot-scope="{row}">
<template slot-scope="{ row }">
<span>{{ row.title }}</span>
</template>
</el-table-column>
<el-table-column label="封面图" align="center">
<template slot-scope="{row}">
<template slot-scope="{ row }">
<img :src="row.image" height="100" />
</template>
</el-table-column>
<el-table-column label="外链" align="center">
<template slot-scope="{row}">
<template slot-scope="{ row }">
<span>{{ row.url }}</span>
</template>
</el-table-column>
<el-table-column label="创建时间" align="center">
<template slot-scope="{row}">
<template slot-scope="{ row }">
<span>{{ row.create_time }}</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button>
>删除</el-button
>
</template>
</el-table-column>
</el-table>
@ -77,11 +89,17 @@
size="950px"
>
<div class="drawer__content">
<el-form ref="dataForm" :model="temp" label-position="left" label-width="70px" style>
<el-form
ref="dataForm"
:model="temp"
label-position="left"
label-width="70px"
style
>
<el-form-item label="类型">
<el-select v-model="temp.static" placeholder="选择类型">
<el-option
v-for="(item,index) in statics"
v-for="(item, index) in statics"
:key="index"
:label="item.name"
:value="item.value"
@ -101,7 +119,7 @@
@change="handleSelectBranch"
>
<el-option
v-for="(item,index) in articles"
v-for="(item, index) in articles"
:key="index"
:label="item.title"
:value="item.article_id"
@ -119,16 +137,17 @@
v-if="temp.image"
:src="temp.image"
class="el-upload el-upload--picture-card"
style="float:left"
style="float: left; width: auto"
/>
<el-upload
ref="sys_app_logo"
:on-success="uploadSuccess"
:on-error="uploadError"
:action="uploadAction"
style="float:left"
style="float: left"
list-type="picture-card"
:show-file-list="false"
:before-upload="validationImages"
>
<i class="el-icon-plus" />
</el-upload>
@ -144,11 +163,17 @@
</template>
<script>
import { fetchAdList, createAd, updateAd, delAd, searchArticle } from '@/api/ad'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import {
fetchAdList,
createAd,
updateAd,
delAd,
searchArticle,
} from "@/api/ad";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
export default {
name: 'adIndex',
name: "adIndex",
components: { Pagination },
data() {
return {
@ -160,94 +185,104 @@ export default {
page: 1,
limit: 20,
},
uploadAction: process.env.VUE_APP_BASE_API + '/files/uploadFile',
uploadAction: process.env.VUE_APP_BASE_API + "/files/uploadFile",
temp: {
id: undefined,
static: undefined,
title: '',
url: '',
static: 1,
title: "",
url: "",
article_id: undefined,
image: '',
is_show: 1
image: "",
is_show: 1,
},
statics: [
{ name: '大轮播图', value: 1 },
{ name: '小轮播图', value: 2 },
{ name: '资讯列表', value: 3 },
{ name: "大轮播图", value: 1 },
{ name: "小轮播图", value: 2 },
{ name: "资讯列表", value: 3 },
],
dialogFormVisible: false,
dialogStatus: '',
dialogStatus: "",
textMap: {
update: 'Edit',
create: 'Create'
update: "Edit",
create: "Create",
},
rules: {
title: [{ required: true, message: 'title is required', trigger: 'blur' }]
title: [
{ required: true, message: "title is required", trigger: "blur" },
],
},
downloadLoading: false,
searchArticleLoading: false,
articles: []
}
articles: [],
validation: true,
};
},
created() {
this.getList()
this.getList();
},
filters: {
getStaticName(id, statics) {
for (var i = 0; i < statics.length; i++) {
if (id == statics[i].value) {
return statics[i].name
return statics[i].name;
}
}
return ''
return "";
},
},
methods: {
//
async validationImages(file) {
let desc = this.temp.static === 1 ? "bigSwiper" : "smallSwiper";
let res = await this.$getImgWidth(file, desc);
this.validation = res;
return res;
},
getList() {
this.listLoading = true
fetchAdList(this.listQuery).then(response => {
this.list = response.data.list
this.total = response.data.count
this.listLoading = true;
fetchAdList(this.listQuery).then((response) => {
this.list = response.data.list;
this.total = response.data.count;
// Just to simulate the time of the request
setTimeout(() => {
this.listLoading = false
}, 1.5 * 1000)
})
this.listLoading = false;
}, 1.5 * 1000);
});
},
handleFilter() {
this.listQuery.page = 1
this.getList()
this.listQuery.page = 1;
this.getList();
},
handleModifyStatus(row, status) {
this.$message({
message: '操作Success',
type: 'success'
})
row.status = status
message: "操作Success",
type: "success",
});
row.status = status;
},
resetTemp() {
this.temp = {
id: undefined,
static: undefined,
title: '',
url: '',
static: 1,
title: "",
url: "",
article_id: undefined,
image: '',
is_show: 1
}
image: "",
is_show: 1,
};
},
submitForm() {
if (this.dialogStatus == 'create') {
this.createData()
} else if (this.dialogStatus == 'update') {
this.updateData()
if (this.dialogStatus == "create") {
this.createData();
} else if (this.dialogStatus == "update") {
this.updateData();
}
},
handleCreate() {
this.resetTemp()
this.dialogStatus = 'create'
this.dialogFormVisible = true
this.resetTemp();
this.dialogStatus = "create";
this.dialogFormVisible = true;
// this.$nextTick(() => {
// this.$refs['dataForm'].clearValidate()
// })
@ -256,65 +291,68 @@ export default {
// this.$refs['dataForm'].validate((valid) => {
// if (valid) {
createAd(this.temp).then(() => {
this.dialogFormVisible = false
this.dialogFormVisible = false;
this.$message({
message: "添加成功",
type: "success",
duration: 2 * 1000,
});
this.getList()
})
this.getList();
});
// }
// })
},
handleUpdate(row) {
console.log(row)
// let news_id = row.news_id
// fetchAdDetails({news_id}).then(res => {
var that = this
searchArticle(row.article_id).then(res => {
that.articles = res.data
that.temp = row
this.dialogStatus = 'update'
this.dialogFormVisible = true
}).catch(function(err) {
console.log(err)
var that = this;
searchArticle(row.article_id)
.then((res) => {
that.articles = res.data;
that.temp = row;
this.dialogStatus = "update";
this.dialogFormVisible = true;
})
.catch(function (err) {
console.log(err);
});
},
updateData() {
// this.$refs['dataForm'].validate((valid) => {
// if (valid) {
updateAd(this.temp).then(() => {
this.dialogFormVisible = false
this.dialogFormVisible = false;
this.$message({
message: "更新成功",
type: "success",
duration: 2 * 1000,
});
this.getList()
})
this.getList();
});
// }
// })
},
handleDelete({ title, news_id }) {
this.$confirm('是否确认删除名称为"' + title + '"的数据项?', '警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(function () {
console.log('del')
return delAd({ news_id })
}).then((response) => {
this.$confirm('是否确认删除名称为"' + title + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(function () {
console.log("del");
return delAd({ news_id });
})
.then((response) => {
if (response.code === 200) {
this.$message({
message: "删除成功",
type: "success",
duration: 2 * 1000,
});
this.open = false
this.getList()
this.open = false;
this.getList();
} else {
this.$message({
message: "删除失败",
@ -322,18 +360,19 @@ export default {
duration: 2 * 1000,
});
}
}).catch(function () { })
})
.catch(function () {});
},
uploadSuccess(response, file) {
if (response.state == 'SUCCESS') {
this.temp.image = response.url
if (this.validation && response.state == "SUCCESS") {
this.temp.image = response.url;
}
},
uploadFileSuccess(response, file) {
let obj = {}
obj.name = response.original
obj.url = response.url
this.temp.script_url = JSON.stringify(obj)
let obj = {};
obj.name = response.original;
obj.url = response.url;
this.temp.script_url = JSON.stringify(obj);
},
uploadRemove(file) {
const uid = file.uid;
@ -348,14 +387,14 @@ export default {
uploadError(err) {
this.$alert(err, "发生错误", {
confirmButtonText: "确定",
callback: (action) => { },
callback: (action) => {},
});
},
handleSelectBranch(item) {
console.log('远程搜索选中后返回的item:::::即value的值')
console.log(item)
console.log("远程搜索选中后返回的item:::::即value的值");
console.log(item);
// id item
this.$set(this.temp,'article_id', item)
this.$set(this.temp, "article_id", item);
},
//
remoteMethod(query) {
@ -363,19 +402,19 @@ export default {
searchArticle(query)
.then(function (res) {
//
that.articles = res.data
that.list = that.states.map(item => {
that.articles = res.data;
that.list = that.states.map((item) => {
// item.uid item.name
return { value: item.uid, label: item.name };
});
})
.catch(function (err) {
console.log(err)
console.log(err);
});
return
return;
},
}
}
},
};
</script>
<style lang="scss" scoped>
.app-container {

8
src/views/article/index.vue

@ -260,7 +260,7 @@
v-if="temp.img"
:src="temp.img"
class="el-upload el-upload--picture-card"
style="float: left"
style="float: left; width: auto"
/>
<el-upload
ref="sys_app_logo"
@ -510,11 +510,7 @@ export default {
getList() {
this.listLoading = true;
fetchList(this.listQuery).then((response) => {
response.data.list.forEach((item) => {
// if (!item.is_offline) {
// item.is_offline = 2;
// }
});
console.log(response);
this.list = response.data.list;
this.total = response.data.count;
// Just to simulate the time of the request

Loading…
Cancel
Save