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' import { Message } from 'element-ui'
export default function (file, id) { export default function (file, id) {
let width = 0;
let height = 0;
let width = null;
let height = null;
switch (id) { switch (id) {
case 23: //深度解说 case 23: //深度解说
width = 650; width = 650;
@ -23,6 +23,14 @@ export default function (file, id) {
width = 380; width = 380;
height = 220; height = 220;
break; break;
case 'bigSwiper': //首页大轮播
width = 1920;
height = 960;
break;
case 'smallSwiper': //首页小轮播
width = 722;
height = 406;
break;
}; };
return new Promise(resolve => { return new Promise(resolve => {
let reader = new FileReader(); let reader = new FileReader();
@ -32,7 +40,7 @@ export default function (file, id) {
let img = document.createElement("img"); let img = document.createElement("img");
img.src = txt; img.src = txt;
img.onload = function () { img.onload = function () {
console.log(id, width, height);
// console.log(id, width, height);
if (width && height) { if (width && height) {
if (img.width === width && img.height === height) { if (img.width === width && img.height === height) {
resolve(true) 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" type="primary"
icon="el-icon-edit" icon="el-icon-edit"
@click="handleCreate" @click="handleCreate"
>添加资讯</el-button>
>添加资讯</el-button
>
</div> </div>
<el-table <el-table
:key="tableKey" :key="tableKey"
@ -15,47 +16,58 @@
border border
fit fit
highlight-current-row highlight-current-row
style="width: 100%;"
style="width: 100%"
> >
<el-table-column label="ID" prop="id" align="center"> <el-table-column label="ID" prop="id" align="center">
<template slot-scope="{row}">
<template slot-scope="{ row }">
<span>{{ row.news_id }}</span> <span>{{ row.news_id }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="分类" align="center"> <el-table-column label="分类" align="center">
<template slot-scope="{row}">
<template slot-scope="{ row }">
<span>{{ row.static | getStaticName(statics) }}</span> <span>{{ row.static | getStaticName(statics) }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="标题" align="center"> <el-table-column label="标题" align="center">
<template slot-scope="{row}">
<template slot-scope="{ row }">
<span>{{ row.title }}</span> <span>{{ row.title }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="封面图" align="center"> <el-table-column label="封面图" align="center">
<template slot-scope="{row}">
<template slot-scope="{ row }">
<img :src="row.image" height="100" /> <img :src="row.image" height="100" />
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="外链" align="center"> <el-table-column label="外链" align="center">
<template slot-scope="{row}">
<template slot-scope="{ row }">
<span>{{ row.url }}</span> <span>{{ row.url }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="创建时间" align="center"> <el-table-column label="创建时间" align="center">
<template slot-scope="{row}">
<template slot-scope="{ row }">
<span>{{ row.create_time }}</span> <span>{{ row.create_time }}</span>
</template> </template>
</el-table-column> </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"> <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 <el-button
size="mini" size="mini"
type="text" type="text"
icon="el-icon-delete" icon="el-icon-delete"
@click="handleDelete(scope.row)" @click="handleDelete(scope.row)"
>删除</el-button>
>删除</el-button
>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@ -77,11 +89,17 @@
size="950px" size="950px"
> >
<div class="drawer__content"> <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-form-item label="类型">
<el-select v-model="temp.static" placeholder="选择类型"> <el-select v-model="temp.static" placeholder="选择类型">
<el-option <el-option
v-for="(item,index) in statics"
v-for="(item, index) in statics"
:key="index" :key="index"
:label="item.name" :label="item.name"
:value="item.value" :value="item.value"
@ -101,7 +119,7 @@
@change="handleSelectBranch" @change="handleSelectBranch"
> >
<el-option <el-option
v-for="(item,index) in articles"
v-for="(item, index) in articles"
:key="index" :key="index"
:label="item.title" :label="item.title"
:value="item.article_id" :value="item.article_id"
@ -119,16 +137,17 @@
v-if="temp.image" v-if="temp.image"
:src="temp.image" :src="temp.image"
class="el-upload el-upload--picture-card" class="el-upload el-upload--picture-card"
style="float:left"
style="float: left; width: auto"
/> />
<el-upload <el-upload
ref="sys_app_logo" ref="sys_app_logo"
:on-success="uploadSuccess" :on-success="uploadSuccess"
:on-error="uploadError" :on-error="uploadError"
:action="uploadAction" :action="uploadAction"
style="float:left"
style="float: left"
list-type="picture-card" list-type="picture-card"
:show-file-list="false" :show-file-list="false"
:before-upload="validationImages"
> >
<i class="el-icon-plus" /> <i class="el-icon-plus" />
</el-upload> </el-upload>
@ -144,11 +163,17 @@
</template> </template>
<script> <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 { export default {
name: 'adIndex',
name: "adIndex",
components: { Pagination }, components: { Pagination },
data() { data() {
return { return {
@ -160,94 +185,104 @@ export default {
page: 1, page: 1,
limit: 20, limit: 20,
}, },
uploadAction: process.env.VUE_APP_BASE_API + '/files/uploadFile',
uploadAction: process.env.VUE_APP_BASE_API + "/files/uploadFile",
temp: { temp: {
id: undefined, id: undefined,
static: undefined,
title: '',
url: '',
static: 1,
title: "",
url: "",
article_id: undefined, article_id: undefined,
image: '',
is_show: 1
image: "",
is_show: 1,
}, },
statics: [ statics: [
{ name: '大轮播图', value: 1 },
{ name: '小轮播图', value: 2 },
{ name: '资讯列表', value: 3 },
{ name: "大轮播图", value: 1 },
{ name: "小轮播图", value: 2 },
{ name: "资讯列表", value: 3 },
], ],
dialogFormVisible: false, dialogFormVisible: false,
dialogStatus: '',
dialogStatus: "",
textMap: { textMap: {
update: 'Edit',
create: 'Create'
update: "Edit",
create: "Create",
}, },
rules: { rules: {
title: [{ required: true, message: 'title is required', trigger: 'blur' }]
title: [
{ required: true, message: "title is required", trigger: "blur" },
],
}, },
downloadLoading: false, downloadLoading: false,
searchArticleLoading: false, searchArticleLoading: false,
articles: []
}
articles: [],
validation: true,
};
}, },
created() { created() {
this.getList()
this.getList();
}, },
filters: { filters: {
getStaticName(id, statics) { getStaticName(id, statics) {
for (var i = 0; i < statics.length; i++) { for (var i = 0; i < statics.length; i++) {
if (id == statics[i].value) { if (id == statics[i].value) {
return statics[i].name
return statics[i].name;
} }
} }
return ''
return "";
}, },
}, },
methods: { 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() { 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 // Just to simulate the time of the request
setTimeout(() => { setTimeout(() => {
this.listLoading = false
}, 1.5 * 1000)
})
this.listLoading = false;
}, 1.5 * 1000);
});
}, },
handleFilter() { handleFilter() {
this.listQuery.page = 1
this.getList()
this.listQuery.page = 1;
this.getList();
}, },
handleModifyStatus(row, status) { handleModifyStatus(row, status) {
this.$message({ this.$message({
message: '操作Success',
type: 'success'
})
row.status = status
message: "操作Success",
type: "success",
});
row.status = status;
}, },
resetTemp() { resetTemp() {
this.temp = { this.temp = {
id: undefined, id: undefined,
static: undefined,
title: '',
url: '',
static: 1,
title: "",
url: "",
article_id: undefined, article_id: undefined,
image: '',
is_show: 1
}
image: "",
is_show: 1,
};
}, },
submitForm() { 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() { handleCreate() {
this.resetTemp()
this.dialogStatus = 'create'
this.dialogFormVisible = true
this.resetTemp();
this.dialogStatus = "create";
this.dialogFormVisible = true;
// this.$nextTick(() => { // this.$nextTick(() => {
// this.$refs['dataForm'].clearValidate() // this.$refs['dataForm'].clearValidate()
// }) // })
@ -256,65 +291,68 @@ export default {
// this.$refs['dataForm'].validate((valid) => { // this.$refs['dataForm'].validate((valid) => {
// if (valid) { // if (valid) {
createAd(this.temp).then(() => { createAd(this.temp).then(() => {
this.dialogFormVisible = false
this.dialogFormVisible = false;
this.$message({ this.$message({
message: "添加成功", message: "添加成功",
type: "success", type: "success",
duration: 2 * 1000, duration: 2 * 1000,
}); });
this.getList()
})
this.getList();
});
// } // }
// }) // })
}, },
handleUpdate(row) { handleUpdate(row) {
console.log(row)
// let news_id = row.news_id // let news_id = row.news_id
// fetchAdDetails({news_id}).then(res => { // 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() { updateData() {
// this.$refs['dataForm'].validate((valid) => { // this.$refs['dataForm'].validate((valid) => {
// if (valid) { // if (valid) {
updateAd(this.temp).then(() => { updateAd(this.temp).then(() => {
this.dialogFormVisible = false
this.dialogFormVisible = false;
this.$message({ this.$message({
message: "更新成功", message: "更新成功",
type: "success", type: "success",
duration: 2 * 1000, duration: 2 * 1000,
}); });
this.getList()
})
this.getList();
});
// } // }
// }) // })
}, },
handleDelete({ title, news_id }) { 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) { if (response.code === 200) {
this.$message({ this.$message({
message: "删除成功", message: "删除成功",
type: "success", type: "success",
duration: 2 * 1000, duration: 2 * 1000,
}); });
this.open = false
this.getList()
this.open = false;
this.getList();
} else { } else {
this.$message({ this.$message({
message: "删除失败", message: "删除失败",
@ -322,18 +360,19 @@ export default {
duration: 2 * 1000, duration: 2 * 1000,
}); });
} }
}).catch(function () { })
})
.catch(function () {});
}, },
uploadSuccess(response, file) { 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) { 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) { uploadRemove(file) {
const uid = file.uid; const uid = file.uid;
@ -348,14 +387,14 @@ export default {
uploadError(err) { uploadError(err) {
this.$alert(err, "发生错误", { this.$alert(err, "发生错误", {
confirmButtonText: "确定", confirmButtonText: "确定",
callback: (action) => { },
callback: (action) => {},
}); });
}, },
handleSelectBranch(item) { handleSelectBranch(item) {
console.log('远程搜索选中后返回的item:::::即value的值')
console.log(item)
console.log("远程搜索选中后返回的item:::::即value的值");
console.log(item);
// id item // id item
this.$set(this.temp,'article_id', item)
this.$set(this.temp, "article_id", item);
}, },
// //
remoteMethod(query) { remoteMethod(query) {
@ -363,19 +402,19 @@ export default {
searchArticle(query) searchArticle(query)
.then(function (res) { .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 // item.uid item.name
return { value: item.uid, label: item.name }; return { value: item.uid, label: item.name };
}); });
}) })
.catch(function (err) { .catch(function (err) {
console.log(err)
console.log(err);
}); });
return
return;
}, },
}
}
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.app-container { .app-container {

8
src/views/article/index.vue

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

Loading…
Cancel
Save