iview+form-create实现图片上传预览删除效果代码

代码语言:html

所属分类:上传

代码描述:iview+form-create实现图片上传预览删除效果代码

代码标签: 上传 预览 删除 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/iview.css">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/iview.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/form-create.iview.js"></script>
<style>
    body{
        padding: 40px;
    }
</style>
</head>
<body>

    <div id="app">
      
        <form-create :rule="rule" />
    </div>
    <script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
                rule: [formCreate.maker.upload('轮播图1', 'pic1', '//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90')
                    .props({
                        "action": "",
                        "maxLength": 1,
                        "multiple": true,
                        "type": "select",
                        "uploadType": "image",
                        "name": "file",
                        allowRemove: true,
                        "onSuccess": function() {
                            return '//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90';
              .........完整代码请登录后点击上方下载按钮下载查看

网友评论0