Skip to content

D
dd_school
Commit bd39ffd0 by peijy
Options

社团图片上传多张

parent 21d059ed
Showing with 47 additions and 17 deletions
ruoyi-ui/README.md
...@@ -7,7 +7,7 @@ git clone https://gitee.com/y_project/RuoYi-Vue ...@@ -7,7 +7,7 @@ git clone https://gitee.com/y_project/RuoYi-Vue
# 进入项目目录 # 进入项目目录
cd ruoyi-ui cd ruoyi-ui
__
# 安装依赖 # 安装依赖
npm install npm install
......
ruoyi-ui/src/views/smartSchool/massOrganization/communityStyle/index.vue
<!--社团风采-->
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form <el-form
...@@ -62,7 +63,7 @@ ...@@ -62,7 +63,7 @@
<el-table-column label="风采主题" align="center" prop="theme" /> <el-table-column label="风采主题" align="center" prop="theme" />
<el-table-column label="附件" align="center" prop="file"> <el-table-column label="附件" align="center" prop="file">
<template slot-scope="scope"> <template slot-scope="scope">
<el-image style="width: 100px; height: 100px" :src="scope.row.file"> <el-image v-for="(item,index) in scope.row.file.split(',')" :key="index" style="width: 100px; height: 100px" :src="item" :preview-src-list="[item]">
</el-image> </el-image>
</template> </template>
</el-table-column> </el-table-column>
...@@ -137,17 +138,21 @@ ...@@ -137,17 +138,21 @@
" "
> >
<el-upload <el-upload
multiple
v-loading="uploadLoading" v-loading="uploadLoading"
class="avatar-uploader" class="avatar-uploader"
action="#" :action="uploadFileUrl"
accept="image/*" accept="image/*"
:show-file-list="false" :show-file-list="false"
:on-success="handleAvatarSuccess" :on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload" :before-upload="beforeAvatarUpload"
:http-request="uploadImage"
> >
<img v-if="form.file" :src="form.file" class="avatar" /> <!-- <img v-for="(item,index) in form.file" :key="index" v-if="form.file" :src="item" class="avatar" />-->
<div v-if="form.file">
<img v-for="(item,index) in form.file" :key="index" :src="item" class="avatar" />
</div>
<i v-else class="el-icon-plus avatar-uploader-icon"></i> <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
...@@ -191,6 +196,9 @@ export default { ...@@ -191,6 +196,9 @@ export default {
components: { picAvatar }, components: { picAvatar },
data() { data() {
return { return {
//图片上传列表
uploadList: [],
uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
pev: process.env.VUE_APP_BASE_API, pev: process.env.VUE_APP_BASE_API,
// 输入框字数限制 // 输入框字数限制
TEXT_SIZE, TEXT_SIZE,
...@@ -313,10 +321,9 @@ export default { ...@@ -313,10 +321,9 @@ export default {
}; };
// console.log(params); // console.log(params);
getCommunityInfo(params).then((response) => { getCommunityInfo(params).then((response) => {
// console.log("response", response); console.log("response", response);
this.picList = response.rows; this.picList = response.rows;
this.picList.file = response.rows.file; // this.picList.file = response.rows.file.split(',');
// console.log(this.picList.file);
this.total = response.total; this.total = response.total;
this.loading = false; this.loading = false;
}); });
...@@ -369,8 +376,10 @@ export default { ...@@ -369,8 +376,10 @@ export default {
}, },
/** 新增按钮操作 */ /** 新增按钮操作 */
handleAdd() { handleAdd() {
this.uploadList = []
this.check = false; this.check = false;
this.reset(); this.reset();
console.log('form.file',this.form.file)
this.open = true; this.open = true;
this.title = "新增社团风采"; this.title = "新增社团风采";
}, },
...@@ -378,22 +387,31 @@ export default { ...@@ -378,22 +387,31 @@ export default {
handleUpdate(row) { handleUpdate(row) {
this.reset(); this.reset();
const ids = row.id || this.ids; const ids = row.id || this.ids;
this.uploadList = []
this.form.file = []
listCommunityInfo(ids).then((response) => { listCommunityInfo(ids).then((response) => {
console.log('修改',response)
this.form = response.data; this.form = response.data;
this.form.file = response.data.file.split(',')
console.log("this.form.file", this.form.file);
this.imageUrl = this.pev + this.form.picUrl; this.imageUrl = this.pev + this.form.picUrl;
console.log(this.imageUrl, "this.imageUrl");
this.open = true; this.open = true;
this.title = "修改园区照片"; this.title = "修改园区照片";
}); });
}, },
/** 查看按钮操作 */ /** 查看按钮操作 */
handleCheck(row) { handleCheck(row) {
this.uploadList = []
this.form.file = []
this.check = true; this.check = true;
this.open = true; this.open = true;
const ids = row.id || this.ids; const ids = row.id || this.ids;
listCommunityInfo(ids).then((response) => { listCommunityInfo(ids).then((response) => {
console.log('查看',response)
this.form = response.data; this.form = response.data;
this.form.file = response.data.file; console.log('this.form.file',this.form.file)
this.form.file = response.data.file.split(',');
console.log(this.form.file); console.log(this.form.file);
this.open = true; this.open = true;
}); });
...@@ -401,9 +419,19 @@ export default { ...@@ -401,9 +419,19 @@ export default {
}, },
// 上传成功回调 // 上传成功回调
handleAvatarSuccess(res, file) { handleAvatarSuccess(res, file) {
this.imageUrl = res.data.url;
console.log(file); console.log('Success res',res)
this.commonUpload(file); console.log('Success file',file)
if(res.code == 200){
this.uploadList.push( this.pev + res.fileName );
this.form.file = this.uploadList
console.log('this.uploadList',this.uploadList)
console.log('this.form.file',this.form.file)
}
// this.imageUrl = res.data.url;
// console.log(file);
// this.commonUpload(file);
}, },
// 上传前格式和图片大小限制 // 上传前格式和图片大小限制
beforeAvatarUpload(file) { beforeAvatarUpload(file) {
...@@ -427,6 +455,7 @@ export default { ...@@ -427,6 +455,7 @@ export default {
}, },
// 上传图片 // 上传图片
uploadImage(file) { uploadImage(file) {
console.log('file',file)
const fileData = file.file; const fileData = file.file;
const formData = new FormData(); const formData = new FormData();
formData.append("file", fileData); formData.append("file", fileData);
...@@ -454,7 +483,8 @@ export default { ...@@ -454,7 +483,8 @@ export default {
const params = { const params = {
id: this.form.id, id: this.form.id,
theme: this.form.theme, theme: this.form.theme,
file: this.form.file, // file: this.form.file,
file:this.uploadList.toString()
}; };
console.log(params, "params"); console.log(params, "params");
editCommunityInfo(params) editCommunityInfo(params)
...@@ -469,7 +499,7 @@ export default { ...@@ -469,7 +499,7 @@ export default {
const params = { const params = {
cid: this.$route.query.id, cid: this.$route.query.id,
theme: this.form.theme, theme: this.form.theme,
file: this.form.file, file:this.uploadList.toString()
}; };
console.log(params, "params"); console.log(params, "params");
addCommunityInfo(params) addCommunityInfo(params)
......
ruoyi-ui/vue.config.js
...@@ -44,10 +44,10 @@ module.exports = { ...@@ -44,10 +44,10 @@ module.exports = {
//target: ` http://43.143.63.140:8848`, //target: ` http://43.143.63.140:8848`,
//target: ` http://43.143.63.140:8095`, //target: ` http://43.143.63.140:8095`,
//部署时后端地址 //部署时后端地址
//target: `http://47.105.176.202:8137`, target: `http://47.105.176.202:5131`,
//学校内网 //学校内网
// target: `http://10.20.100.201:57321`, // target: `http://10.20.100.201:57321`,
target: `http://47.105.176.202:5112`, // target: `http://47.105.176.202:5112`,
// target: `http://192.168.1.113:8848`, // target: `http://192.168.1.113:8848`,
changeOrigin: true, changeOrigin: true,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment