vue图片批量上传

92次阅读

共计 1231 个字符,预计需要花费 4 分钟才能阅读完成。

公司项目要求做一个合同照片的批量上传,项目是用 element ui 框架,但是只要求兼容华为 pad,所以看了看决定还是写一个简单的 demo。
以下是代码,欢迎大神指出错误和不足。
html:

<template>
    <div class="form-bar-child">
        <div class="upload-contract" v-for="(item, index) in conImgList" :key="item.id">
            <img :src="item" alt=""class="cover-img" />
            <span @click="delimg(index)"></span>
        </div>
        <div class="upload-contract-btn" v-if="conImgList.length < imgNumberLimit">
            <i class="icon-upload-contract"></i>
            <input type="file" class="contract-input" multiple @change="fileChange($event)" />
        </div>
    </div>
</template>

js

data() {

    return {afterimgfiles: [], // 上传到后台的数据
        conImgList: [], // 预览地址
        imgNumberLimit: 9, // 限制上传数量
        maxSize: 10240000 / 2
    };
},
methods: {
        /* eslint-disable */
        fileChange(e) { 
            const _this = this
            const event = event || window.event;
            const file = event.target.files
            const leng = file.length;
            if (this.conImgList.length + leng > this.imgNumberLimit) {this.$message.error("最多只能上传" + this.imgNumberLimit + "张图片!");
            return;
            }
            if (file.size > this.maxSize) {this.$message.error("图片太大,不允许上传!");
            return;
            }
            for (var i = 0; i < leng; i++) {const reader = new FileReader(); 
                _this.afterimgfiles.push(file[i])
                reader.readAsDataURL(file[i]);
                reader.onload = function(e) {_this.conImgList.push(e.target.result); // base 64                          
                };
                console.log(_this.afterimgfiles)
            }
        },
        delimg(index) {this.afterimgfiles.splice(index, 1);
            this.conImgList.splice(index, 1);
        },
    }

正文完
 0