利用vant上传图片功能(可多选)

38 篇文章 0 订阅
9 篇文章 0 订阅
               <div class="uploader">
                    <van-uploader  v-model="fileList"  accept="image/*" multiple  :max-count="countMax" />
                </div>
                <div @click="submit">提交</div>
<script>
    window.alert = function (name) {
        var iframe = document.createElement("IFRAME");
        iframe.style.display = "none";
        iframe.setAttribute("src", 'data:text/plain,');
        document.documentElement.appendChild(iframe);
        window.frames[0].window.alert(name);
        iframe.parentNode.removeChild(iframe);
    }
    new Vue({
        el: "#Vue",
        data: {
            countMax: 9,
            fileList: [],
            fileArr: []
        },
        created() {
            document.documentElement.style.fontSize = 16 * document.documentElement.clientWidth / 375 + 'px'
        },
        methods: {
            // 请求公共方法
            ajaximg(type, url, params, cb) {
                $.ajax({
                    type: type,
                    url: url,
                    data: params,
                    dataType: "json",
                    async: true,
                    contentType: false,
                    processData: false,
                    success: (response) => {
                        cb(response)
                    }
                });
            },
    //提交
            submit() {
                if (this.fileList.length < 2) {
                    vant.Toast("图片不能小于2张");
                    return false;
                }
                vant.Toast.loading({
                    message: "加载中...",
                    forbidClick: true,
                    duration: 0,
                });
                this.fileArr = [];
                this.getPreview(this.fileList, 0);
            },
            // 上传图片
            getPreview(file, i) {
                let fileUrl = file[i].file;
                let formData = new FormData();
                formData.append("file", fileUrl);
                formData.append("key", "");
                this.ajaximg('post','域名', formData, (res) => {
                    if (res.status == 200) {
                        this.fileArr.push(res.info.url);
                         if (i + 1 == this.fileList.length) {
                            this.setAdd();
                        }
                        if (++i < this.fileList.length) {
                            this.getPreview(file, i);
                        }
                    } else {
                        vant.Dialog.alert({
                            title: "温馨提示",
                            message: "图片上传失败,请重新上传",
                        }).then(() => { });
                    }
                })
            },
            setAdd() {
                console.log(this.fileArr)

                vant.Toast("上传成功");
            }
        }
    })
</script>
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值