blackteay/ThinkAdmin
1
0
Fork 0
mirror of https://gitee.com/zoujingli/ThinkAdmin.git synced 2025-04-06 03:58:04 +08:00
Code Issues Projects Releases Wiki Activity

修改文件上传

Browse Source
This commit is contained in:
Anyon 2022-06-27 11:27:45 +08:00
parent ef8d151b77
commit 87cc8d7117
3 changed files with 93 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app/admin/view/api/upload/document.html
View File

@ -5,12 +5,12 @@
<a class="layui-btn layui-btn-sm layui-btn-normal" @click="search">搜 索</a> <a class="layui-btn layui-btn-sm layui-btn-normal" @click="search">搜 索</a>
</div> </div>
<div class="pull-right"> <div class="pull-right">
<a data-file="one" data-type="jpg,png" class="layui-btn layui-btn-sm">上传图片</a> <a class="layui-btn layui-btn-sm" @click="uploadImage">上传图片</a>
</div> </div>
</div> </div>
<div class="image-dialog-body"> <div class="image-dialog-body">
<div class="image-dialog-item" v-for="x in items"> <div class="image-dialog-item" v-for="x in items">
<div class="uploadimage" :style="x.style" @click="select(x)"></div> <div class="uploadimage" :style="x.style" @click="setValue(x.xurl)"></div>
<p class="image-dialog-item-name layui-elip" v-text="x.name"></p> <p class="image-dialog-item-name layui-elip" v-text="x.name"></p>
</div> </div>
</div> </div>
@ -78,18 +78,21 @@
<script> <script>
require(['vue'], function (vue) { require(['vue'], function (vue) {
new vue({ var app = new vue({
el: '#ImageDialog', el: '#ImageDialog',
data: { data: {
page: 1, page: 1,
keys: '', keys: '',
limit: 15, limit: 15,
items: [], items: [],
$btn: null,
}, },
created: function () { created: function () {
this.$btn = $('#{$get.id}');
this.loadPage(); this.loadPage();
}, },
methods: { methods: {
// 创建分页工具条
addPage: function (count) { addPage: function (count) {
var that = this; var that = this;
layui.laypage.render({ layui.laypage.render({
@ -100,15 +103,18 @@
}, },
}); });
}, },
// 搜索刷新数据
search: function () { search: function () {
this.page = 1; this.page = 1;
this.loadPage(); this.loadPage();
}, },
select: function (x) { // 设置选择数据
this.$btn = $('#{$get.id}').trigger('change', x); setValue: function (url) {
if (this.$btn.data('input')) $(this.$btn.data('input')).val(x.xurl).trigger('change', x); this.$btn = $('#{$get.id}').trigger('change', url);
if (this.$btn.data('input')) $(this.$btn.data('input')).val(url).trigger('change', url);
$('#ImageDialog').parents('.layui-layer-content').next().find('.layui-layer-close').trigger('click'); $('#ImageDialog').parents('.layui-layer-content').next().find('.layui-layer-close').trigger('click');
}, },
// 加载页面数据
loadPage: function () { loadPage: function () {
var that = this; var that = this;
this.params = {page: this.page, limit: this.limit, output: 'layui.table', name: this.keys || ''}; this.params = {page: this.page, limit: this.limit, output: 'layui.table', name: this.keys || ''};
@ -120,8 +126,25 @@
}); });
return false; return false;
}); });
} },
// 上传图片文件
uploadImage: function () {
$('[data-field="image-dialog-upload-input"]').click();
$('[name="image-dialog-upload-input"]').one('change', function (e) {
app.setValue(e.currentTarget.value);
// e.currentTarget.value 取上传后的值
// app.page = 1;
// app.loadPage();
});
},
} }
}); });
}); });
</script> </script>
<label class="layui-hide">
<!-- 图片上传组件 开始 -->
<input class="layui-input" name="image-dialog-upload-input">
<button class="layui-btn" data-file data-type="png,jpg,jpeg,gif" data-field="image-dialog-upload-input"></button>
<!-- 图片上传组件 结束 -->
</label>

37
app/admin/view/api/upload/image.html
View File

@ -5,12 +5,12 @@
<a class="layui-btn layui-btn-sm layui-btn-normal" @click="search">搜 索</a> <a class="layui-btn layui-btn-sm layui-btn-normal" @click="search">搜 索</a>
</div> </div>
<div class="pull-right"> <div class="pull-right">
<a data-file="one" data-type="jpg,png" class="layui-btn layui-btn-sm">上传图片</a> <a class="layui-btn layui-btn-sm" @click="uploadImage">上传图片</a>
</div> </div>
</div> </div>
<div class="image-dialog-body"> <div class="image-dialog-body">
<div class="image-dialog-item" v-for="x in items"> <div class="image-dialog-item" v-for="x in items">
<div class="uploadimage" :style="x.style" @click="select(x)"></div> <div class="uploadimage" :style="x.style" @click="setValue(x.xurl)"></div>
<p class="image-dialog-item-name layui-elip" v-text="x.name"></p> <p class="image-dialog-item-name layui-elip" v-text="x.name"></p>
</div> </div>
</div> </div>
@ -78,18 +78,21 @@
<script> <script>
require(['vue'], function (vue) { require(['vue'], function (vue) {
new vue({ var app = new vue({
el: '#ImageDialog', el: '#ImageDialog',
data: { data: {
page: 1, page: 1,
keys: '', keys: '',
limit: 15, limit: 15,
items: [], items: [],
$btn: null,
}, },
created: function () { created: function () {
this.$btn = $('#{$get.id}');
this.loadPage(); this.loadPage();
}, },
methods: { methods: {
// 创建分页工具条
addPage: function (count) { addPage: function (count) {
var that = this; var that = this;
layui.laypage.render({ layui.laypage.render({
@ -100,15 +103,18 @@
}, },
}); });
}, },
// 搜索刷新数据
search: function () { search: function () {
this.page = 1; this.page = 1;
this.loadPage(); this.loadPage();
}, },
select: function (x) { // 设置选择数据
this.$btn = $('#{$get.id}').trigger('change', x); setValue: function (url) {
if (this.$btn.data('input')) $(this.$btn.data('input')).val(x.xurl).trigger('change', x); this.$btn = $('#{$get.id}').trigger('change', url);
if (this.$btn.data('input')) $(this.$btn.data('input')).val(url).trigger('change', url);
$('#ImageDialog').parents('.layui-layer-content').next().find('.layui-layer-close').trigger('click'); $('#ImageDialog').parents('.layui-layer-content').next().find('.layui-layer-close').trigger('click');
}, },
// 加载页面数据
loadPage: function () { loadPage: function () {
var that = this; var that = this;
this.params = {page: this.page, limit: this.limit, output: 'layui.table', name: this.keys || ''}; this.params = {page: this.page, limit: this.limit, output: 'layui.table', name: this.keys || ''};
@ -120,8 +126,25 @@
}); });
return false; return false;
}); });
} },
// 上传图片文件
uploadImage: function () {
$('[data-field="image-dialog-upload-input"]').click();
$('[name="image-dialog-upload-input"]').one('change', function (e) {
app.setValue(e.currentTarget.value);
// e.currentTarget.value 取上传后的值
// app.page = 1;
// app.loadPage();
});
},
} }
}); });
}); });
</script> </script>
<label class="layui-hide">
<!-- 图片上传组件 开始 -->
<input class="layui-input" name="image-dialog-upload-input">
<button class="layui-btn" data-file data-type="png,jpg,jpeg,gif" data-field="image-dialog-upload-input"></button>
<!-- 图片上传组件 结束 -->
</label>

37
app/admin/view/api/upload/video.html
View File

@ -5,12 +5,12 @@
<a class="layui-btn layui-btn-sm layui-btn-normal" @click="search">搜 索</a> <a class="layui-btn layui-btn-sm layui-btn-normal" @click="search">搜 索</a>
</div> </div>
<div class="pull-right"> <div class="pull-right">
<a data-file="one" data-type="jpg,png" class="layui-btn layui-btn-sm">上传图片</a> <a class="layui-btn layui-btn-sm" @click="uploadImage">上传图片</a>
</div> </div>
</div> </div>
<div class="image-dialog-body"> <div class="image-dialog-body">
<div class="image-dialog-item" v-for="x in items"> <div class="image-dialog-item" v-for="x in items">
<div class="uploadimage" :style="x.style" @click="select(x)"></div> <div class="uploadimage" :style="x.style" @click="setValue(x.xurl)"></div>
<p class="image-dialog-item-name layui-elip" v-text="x.name"></p> <p class="image-dialog-item-name layui-elip" v-text="x.name"></p>
</div> </div>
</div> </div>
@ -78,18 +78,21 @@
<script> <script>
require(['vue'], function (vue) { require(['vue'], function (vue) {
new vue({ var app = new vue({
el: '#ImageDialog', el: '#ImageDialog',
data: { data: {
page: 1, page: 1,
keys: '', keys: '',
limit: 15, limit: 15,
items: [], items: [],
$btn: null,
}, },
created: function () { created: function () {
this.$btn = $('#{$get.id}');
this.loadPage(); this.loadPage();
}, },
methods: { methods: {
// 创建分页工具条
addPage: function (count) { addPage: function (count) {
var that = this; var that = this;
layui.laypage.render({ layui.laypage.render({
@ -100,15 +103,18 @@
}, },
}); });
}, },
// 搜索刷新数据
search: function () { search: function () {
this.page = 1; this.page = 1;
this.loadPage(); this.loadPage();
}, },
select: function (x) { // 设置选择数据
this.$btn = $('#{$get.id}').trigger('change', x); setValue: function (url) {
if (this.$btn.data('input')) $(this.$btn.data('input')).val(x.xurl).trigger('change', x); this.$btn = $('#{$get.id}').trigger('change', url);
if (this.$btn.data('input')) $(this.$btn.data('input')).val(url).trigger('change', url);
$('#ImageDialog').parents('.layui-layer-content').next().find('.layui-layer-close').trigger('click'); $('#ImageDialog').parents('.layui-layer-content').next().find('.layui-layer-close').trigger('click');
}, },
// 加载页面数据
loadPage: function () { loadPage: function () {
var that = this; var that = this;
this.params = {page: this.page, limit: this.limit, output: 'layui.table', name: this.keys || ''}; this.params = {page: this.page, limit: this.limit, output: 'layui.table', name: this.keys || ''};
@ -120,8 +126,25 @@
}); });
return false; return false;
}); });
} },
// 上传图片文件
uploadImage: function () {
$('[data-field="image-dialog-upload-input"]').click();
$('[name="image-dialog-upload-input"]').one('change', function (e) {
app.setValue(e.currentTarget.value);
// e.currentTarget.value 取上传后的值
// app.page = 1;
// app.loadPage();
});
},
} }
}); });
}); });
</script> </script>
<label class="layui-hide">
<!-- 视频上传组件 开始 -->
<input class="layui-input" name="video-dialog-upload-input">
<button class="layui-btn" data-file data-type="mp4" data-field="video-dialog-input">上传视频文件</button>
<!-- 视频上传组件 结束 -->
</label>