<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="utf-8" />
|
<meta http-equiv="X-UA-Compatible" content="chrome=1"/>
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
|
<title>生成图片URL</title>
|
<link rel="stylesheet" type="text/css" href="../../css/doui.min.css"/>
|
<script src="../../js/doui.min.js" type="text/javascript" charset="utf-8"></script>
|
<script src="../../js/requestHost.js" type="text/javascript" charset="utf-8"></script>
|
<script type="text/javascript">
|
doui.importLoad({
|
importArray: [
|
// 雷打不动
|
getHostPath() + "js/jquery.min.js",
|
getHostPath() + "js/vue.min.js",
|
// 字体图标
|
getHostPath() + "fontAdmin/iconfont.css",
|
getHostPath() + "font/iconfont.css",
|
// dom模板
|
getHostPath() + "css/admin-all.css",
|
getHostPath() + "js/admin-creat.js",
|
// 复制插件
|
"clipboard.min.js",
|
"clipboard.config.js",
|
],
|
});
|
</script>
|
</head>
|
|
<body class="fontPC" style="display:none;">
|
<div id="allwai" class="heightenBox">
|
|
<!-- 内容块 -->
|
<div class="fboxCol Xstart Ystart bg-white" style="width:100%; padding:20px;">
|
|
<!--文件上传-->
|
<div class="fboxRow Xstart Ycenter">
|
<div class="font16">图片选择：</div>
|
<div class="inputShell border-1px border-round admin-marginLeft" style="width:1.2rem;">
|
<input id="myimg" type="file" accept=".png,.gif,image/jpeg,.bmp" @change="imgInput.action_change()"/>
|
</div>
|
<div class="admin-btn-roundM bg-green admin-marginLeft" @click="imgInput.action_click()">生成</div>
|
</div>
|
|
<!--链接显示-->
|
<div v-show="imgInput.imgSrc!=null" class="fboxRow Xstart Ycenter" style="margin-top:0.2rem;">
|
<div class="font16">图片URL地址：</div>
|
<div class="fboxRow Xstart Ycenter admin-marginLeft">
|
<!-- 图片地址 -->
|
<div class="font15 font-black select-text">{{imgInput.imgSrc}}</div>
|
<!-- 复制按钮 -->
|
<div class="admin-btn-roundM bg-blue admin-marginLeft" @click="imgInput.action_copy()">复制</div>
|
</div>
|
</div>
|
|
<!--图片预览-->
|
<div v-show="imgInput.imgSrc!=null" class="fboxRow Xstart Ystart" style="margin-top:0.2rem;">
|
<div class="font16">图片URL预览：</div>
|
<img class="admin-marginLeft" style="max-width:2rem;" :src="imgInput.imgSrc"/>
|
</div>
|
|
</div>
|
|
</div>
|
</body>
|
|
</html>
|
|
|
<!--页面数据-->
|
<script type="text/javascript">
|
|
// ==================================================================================== 页面数据
|
// vue 实例化
|
var vm = null;
|
doui.onReady({
|
success: function ()
|
{
|
vm = new Vue({
|
el: "#allwai",
|
// 数据
|
data: {
|
|
// 图片选择组件
|
imgInput: {
|
file: null, // 图片文件
|
imgSrc: null, // 图片地址
|
// 图片选择变换
|
action_change: function ()
|
{
|
// 获取选择文件
|
vm.imgInput.file = $("#myimg")[0].files[0];
|
},
|
// 生成按钮 点击
|
action_click: function ()
|
{
|
// 是否选择文件
|
if (!vm.imgInput.file) { doui.showToast("未选择图片"); }
|
else
|
{
|
// 发起请求
|
doui.showLoading("正在生成");
|
doui.upload({
|
url: gethttp() + "/admin/new/api/v1/upload/uploadPicture",
|
data: {
|
file: vm.imgInput.file, // 文件
|
},
|
success: function (res)
|
{
|
doui.hideLoading();
|
if (res.code != 0) { doui.showToast(res.msg); }
|
else { doui.showToast("生成成功"); vm.imgInput.imgSrc = res.data.url; }
|
},
|
});
|
}
|
},
|
// 复制按钮 点击
|
action_copy: function ()
|
{
|
clipboard.copy(vm.imgInput.imgSrc, function(res)
|
{
|
if (res) { doui.showToast("已复制到剪贴板"); }
|
else { doui.showToast("浏览器不支持，请手动复制"); }
|
});
|
},
|
},
|
|
},
|
});
|
|
|
document.body.style.display = "block";
|
},
|
});
|
|
</script>
|
