vue使用layui上传

问题在于vue渲染多个虚拟dom无法触发layui.upload.render()方法，解决方案为：点击上传按钮的容器时删除dom并重新渲染。

核心代码

<div class="layui-form-item">
    <div class="layui-form-label">图片附件</div>
    <div class="layui-input-block">
        <div class="layui-upload">
            <div :id="`upload-box${index}`" class="layui-inline">
                <button :id="`upload${index}`" type="button" class="layui-btn layui-btn-xs layui-btn-normal upload" @click="upload(index)">多图片上传</button>
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn layui-btn-xs layui-btn-warm" @click="clear(index)">清空</button>
            </div>
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                预览图：
                <div class="layui-upload-list">
                    <img v-for="(img,imgIndex) in item.imgs" :key="imgIndex" :src="img" class="layui-upload-img">
                </div>
            </blockquote>
        </div>
    </div>
</div>

upload(index) {
    let _this = this

    // 删除dom
    $(`#upload${index}`).remove()

    // 重新渲染dom
    $(`#upload-box${index}`).html(`<button type="button" id="upload${index}" class="layui-btn layui-btn-xs layui-btn-normal upload">多图片上传</button>`)

    // 监听dom渲染完成
    let interval = setInterval(() => {
        if ($(`#upload${index}`).length > 0) {
            console.log('aab')
            clearInterval(interval)
            $(`#upload${index}`).click()
        }
    }, 100)

    // 图片上传
    $('.upload').each(function () {
        upload.render({
            elem: this
            , url: '__CONTROLLER__/uploadImg'
            , size: 2048
            , data: { path: '/jkf/' }
            , multiple: true
            , done(res) {
                if (res.status == 1) {
                    _this.list[index].imgs.push(res.data.fullSrc)

                    // 更新viewer
                    setTimeout(() => { $('#app').viewer('update') }, 500)
                }
            }
        })
    })
}

完整代码

<layout name="base" />

<div class="layui-card" id="app" v-cloak>
    <div class="layui-card-header">
        <b>{$cfg['cfg_jkf_year']}年度综合加扣分填报</b>
        <div style="float:right;">
            审核状态：
            <eq name="row['jk_status']" value="0"><span class="color-orange">待审核</span></eq>
            <eq name="row['jk_status']" value="1"><span class="color-green">审核通过(重新提交会再次进入审核流程)</span></eq>
            <eq name="row['jk_status']" value="2"><span class="color-red">审核不通过(请重新提交)</span></eq>
            &emsp;&emsp;
            <a href="__ACTION__">刷新</a>
        </div>
    </div>
    <div class="layui-card-body layui-form">
        <div v-for="(item,index) in list" :key="index" class="layui-row">

            <div class="layui-form-item">
                <div class="layui-form-label">标题</div>
                <div class="layui-input-inline">
                    <input v-model="item.title" class="layui-input" placeholder="请输入加扣分项目名称">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-form-label">分值</div>
                <div class="layui-input-inline">
                    <input v-model="item.score" class="layui-input" placeholder="请输入分值，扣分项输入负数" type="number" step="0.1">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-form-label">图片附件</div>
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <div :id="`upload-box${index}`" class="layui-inline">
                            <button :id="`upload${index}`" type="button" class="layui-btn layui-btn-xs layui-btn-normal upload" @click="upload(index)">多图片上传</button>
                        </div>
                        <div class="layui-inline">
                            <button type="button" class="layui-btn layui-btn-xs layui-btn-warm" @click="clear(index)">清空</button>
                        </div>
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            预览图：
                            <div class="layui-upload-list">
                                <img v-for="(img,imgIndex) in item.imgs" :key="imgIndex" :src="img" class="layui-upload-img">
                            </div>
                        </blockquote>
                    </div>
                </div>
            </div>

        </div>

        <div style="text-align:right;padding:10px;">
            <a href="javascript:;" @click="addItem">添加新项目</a>
        </div>

        <div class="layui-input-block" style="padding:20px;">
            <button @click="submit" class="layui-btn">合计：<b>{{totalScore}}</b>分，提交！</button>
        </div>

    </div>
</div>

<script src="/Public/js/vue.js"></script>
<link rel="stylesheet" href="/Public/js/viewer/viewer.min.css">
<script src="/Public/js/viewer/viewer.min.js"></script>
<script>
    layui.use(['upload', 'form', 'layer'], function () {

        const upload = layui.upload
        const form = layui.form
        const layer = layui.layer

        const app = new Vue({
            el: '#app'
            , data() {
                return {
                    list: []
                }
            }
            , created() {
                let content = '{$row["jk_content"]}'
                if (content) {
                    this.list = JSON.parse(content)
                } else {
                    this.list.push({ title: '', score: '', imgs: [] })
                }
            }
            , computed: {
                totalScore() {
                    let sum = 0
                    this.list.forEach(i => {
                        sum += i.score * 1
                    })
                    return sum
                }
            }
            , methods: {
                // 提交
                submit() {
                    console.log(this.list)
                    let data = {
                        'jk_id': '{$row["jk_id"]}'
                        , 'jk_content': JSON.stringify(this.list)
                        , 'jk_scorezj': this.totalScore
                    }
                    $.post('__ACTION__', data, function (res) {
                        if (res.status == 1) {
                            layer.msg('提交成功，请等待审核！', { icon: 1 })
                        } else {
                            layer.msg(res.msg || '系统错误', { icon: 0 })
                        }
                    })
                }

                // 添加新的空白项目
                , addItem() {
                    this.list.push({ title: '', score: '', imgs: [] })
                }

                // 上传图片
                , upload(index) {
                    let _this = this

                    // 删除dom
                    $(`#upload${index}`).remove()

                    // 重新渲染dom
                    $(`#upload-box${index}`).html(`<button type="button" id="upload${index}" class="layui-btn layui-btn-xs layui-btn-normal upload">多图片上传</button>`)

                    // 监听dom渲染完成
                    let interval = setInterval(() => {
                        if ($(`#upload${index}`).length > 0) {
                            console.log('aab')
                            clearInterval(interval)
                            $(`#upload${index}`).click()
                        }
                    }, 100)

                    // 图片上传
                    $('.upload').each(function () {
                        upload.render({
                            elem: this
                            , url: '__CONTROLLER__/uploadImg'
                            , size: 2048
                            , data: { path: '/jkf/' }
                            , multiple: true
                            , done(res) {
                                if (res.status == 1) {
                                    _this.list[index].imgs.push(res.data.fullSrc)

                                    // 更新viewer
                                    setTimeout(() => { $('#app').viewer('update') }, 500)
                                }
                            }
                        })
                    })
                }

                // 清空图片
                , clear(index) {
                    this.list[index].imgs = []
                    setTimeout(() => { $('#app').viewer('update') }, 500)
                }
            }
        })

        setTimeout(() => { $('#app').viewer('update') }, 1000)
    })
</script>

<style>
    [v-cloak] {
        display: none !important;
    }

    .layui-row {
        padding: 20px;
        border-bottom: 1px dashed #ddd;
    }

    .layui-upload-img {
        height: 100px;
        margin-right: 10px;
        margin-bottom: 10px;
        border-radius: 4px;
        border: 1px solid #ccc;
        box-shadow: 1px 1px 15px #ccc;
    }
</style>