当前位置: 首页 > Web前端 > vue.js

Vue实现粘贴截图上传OSS插件

时间:2023-03-31 20:03:46 vue.js

.ScreenShot{margin-top:10px;}.pasteInputDiv{box-sizing:border-box;宽度:158px;高度:158px;}.pasteInput{背景颜色:#fbfdff;边框:1px虚线#c0ccda;边界半径:6px;高度:158px;行高:156px;垂直对齐:顶部;宽度:158px;字体大小:19px;}.pasteInput:hover{光标:指针;边框:1px虚线#409EFF;}.pasteImgDiv{位置:相对;宽度:158px;高度:158px;}.pasteImg{位置:相对;宽度:158px;高度:158px;边框:1px实心#c0ccda;边界半径:5px;}.close-position{位置:绝对;右:-10px;顶部:-10px;字体大小:22px;背景:#fff;边界半径:50%;颜色:红色的;字体粗细:粗体;z-指数:9999;}.close-position:hover{光标:指针;}Vue实现粘贴截图上传OSS插件公司需要写的上传截图插件。以前公司都是用ElementUI上传图片,截图要先保存再上传到oss。为了方便按照ElementUI上传图片,我写了这个插件的风格,上传成功的图片可以点击查看大图,我也是新手查看粘贴图片的方法。.ScreenShot{margin-top:10px;}.pasteInputDiv{box-sizing:border-box;宽度:158px;高度:158px;}.pasteInput{背景颜色:#fbfdff;边框:1px虚线#c0ccda;边界半径:6px;高度:158px;行高:156px;垂直对齐:顶部;宽度:158px;字体大小:19px;}.pasteInput:hover{光标:指针;边框:1px虚线#409EFF;}.pasteImgDiv{位置:相对;宽度:158px;高度:158px;}.pasteImg{位置:相对;宽度:158px;高度:158px;边框:1px实心#c0ccda;边界半径:5px;}.close-position{位置:绝对;右:-10px;顶部:-10px;字体大小:22px;背景:#fff;边界半径:50%;颜色:红色的;字体粗细:粗体;z-指数:9999;}.close-position:hover{光标:指针;}属性参数说明typeurl输入图片上传url,或Base64图片Stringhttp-request实现自定义上传,回调参数为filefunction事件参数说明回调参数imgFile为粘贴图片后的filefileimgBase64。图片粘贴后的Base64Base64只支持上传截图,如qq、微信、钉钉等应用截图后直接粘贴即可