.

[removed]import {getQiniuToken} from "@/api/common";
import tools from "@/utils/tools";
export default {
    name: 'imgUpload',
    props: {
        fileMaxSize: {            //默认最大体积M            type: Number,
            required: false,            default: 10
        },
        fileCount: {            //上传图片数量            type: Number,
            required: false,            default: 1
        },
        fileType: {
            type: String,
            required: false,            default: 'image/png, image/jpeg, image/jpg'
        }
    },
    data () {        return {
            imgList: [],
            qiniuToken:"",//七牛token        };
    },
    created() {
        getQiniuToken().then(data=>{            //获取七牛token
            this.qiniuToken = data;
        })
    },
    methods: {
        preSelect () {            //点击上传图片之前
            this.$refs.inputRef.click();
        },

        handleChange (e) {            /* eslint-disable */
            //点击上传图片事件            console.log(e)
            let BreakException = {};
            let file = e.target.files;            if ((file.length + this.imgList.length) > this.fileCount) {                this.$cusToast.text('最多上传' + this.fileCount + '张图片');                return;
            }            try {
                file.forEach(element => {
                    console.log(element)                    if (!element.type || this.fileType.indexOf(element.type) === -1) {                        this.$cusToast.text('图片类型错误');                        throw BreakException;
                    } else if (element.size > this.fileMaxSize * 1024 * 1000) {                        this.$cusToast.text('图片太大请重新上传');                        throw BreakException;
                    }
                });
            } catch (error) {                if (e !== BreakException) throw e;
            }

            file.forEach(element => {                // //以base64的形式展示
                // let freader = new FileReader();
                // freader.readAsDataURL(element);
                // freader.onload = (e) => {
                //     this.imgList.push(e.target.result)
                // };
                // 上传到七牛云                tools.qiniuUpLoadFun({file:element, token:this.qiniuToken}).then(url=>{
                    console.log(url)                    this.imgList.push(url)
                })
            });            this.$refs.inputRef.value="";
        },
        deleteImg (ind) {            // 删除图片
            this.imgList.splice(ind,1);
        }
    }
};[removed]style.image-wrapper{
    padding:10px 10px;}.inputer{
    width:100px;
    height:100px;
    display:none;}.img-wrapper{
    display:flex;
    flex-direction: row;
    justify-content: left;
    flex-wrap: wrap;}.image-wrapper .upload-icon{
    margin-left:14px;
    margin-bottom:10px;
    /* overflow: hidden; */
    width:20%;
    height:70px;
    text-align: center;
    border:1px solid #dbdbdb;}.img-wrapper .item{
    position:relative;
    margin-left:14px;
    margin-bottom:10px;
    /* overflow: hidden; */
    width:20%;
    height:70px;
    text-align: center;}.img-wrapper .item .dis-image{
    width:100%;
    height:70px;}.image-wrapper .item .delete {
    display:inline-block;
    position:absolute;
    background-color: #dbdbdb;
    width: 20px;
    height: 20px;
    color: #fff;
    font-size: 0.8em;
    border-radius: 50%;
    top:-9px;
    right:-10px;}.img-wrapper .item .heng{
    position: absolute;
    display:inline-block;
    width:30px;
    height:3px;
    background:#dbdbdb;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);} .img-wrapper .item .su{
    position: absolute;
    display:inline-block;
    width:3px;
    height:30px;
    background:#dbdbdb;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);}