vue封装iview upload图片上传组件

1年前 (2023) 程序员胖胖胖虎阿
116 0 0
1:文件流的形式
<template>
    <div>
        <div v-for="(item, index) in uploadList" :key="index" :class="uploadObj.uploadClass ? 'ty-bank-upload-list_' : 'ty-bank-upload-list-change'">
            <template>
                <img :src="baseUpload + item">
                <div class="ty-bank-upload-list-cover">
                    <Icon class="ty-delete-icon" type="ios-trash-outline" @click.native="handleRemove(item, index)"></Icon>
                </div>
            </template>

 

            <!-- <template>
                <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
            </template> -->
        </div>

 

        <Upload
            ref="handleLoad"
            :show-upload-list="false"
            :multiple = "uploadObj.multiple"
            :format="['jpg', 'jpeg', 'png']"
            :max-size="2048"
            :on-success="handleSuccess"
            :on-format-error="handleFormatError"
            :on-exceeded-size="handleMaxSize"
            :before-upload="handleBeforeUpload"
            :on-progress="handleProcessUpload"
            type="select"
            :action="handleSuccessUrl"
            :data="handleSuccessData"
            :name="images"
            style="display: inline-block; width:58px;">
            <div v-if="uploadList.length < uploadObj.length" :class="uploadObj.uploadClass ? 'ty-upload-img' : 'ty-upload-img-change'">
              <Icon type="ios-image-outline" :size="uploadObj.size" style="line-height: 100px"></Icon>
            </div>
        </Upload>
    </div>
</template>
 
<script>
    export default {
        data () {
            return {
                baseUpload: process.env.API_DOMAIN,
                imgName: '',
                visible: false,

 

                uploadFileNameArr: [],  // 上传文件名
                handleSuccessUrl: process.env.API_DOMAIN + '/data/v1/imagesFileUpload',
                uploadList: [],  // 文件列表
                handleSuccessData: {
                  handler: 'Image'
                },
                images: 'images',

 

            }
        },
        // 接收父组件传递过来的信息(通信)
        props: {
            // upload 动态
            uploadObj: {
                type: Object,
                // 当为对象类型设置默认值时必须使用函数返回
                default: function () { // 默认参数
                    return {
                        multiple: false, // 是否开启多图
                        length: 5, // 图片个数
                        size: 80, // 大小
                        uploadClass: true, // 控制动态样式
                        uploadList: [],
                    }
                }
            },

 

        },
        watch: {
            'uploadObj.uploadList' (val) {
                this.uploadList = val;
            }
        },
        computed: {
 
        },
        created () {

 

        },
        mounted () {

 

        },

 

        methods: {
            handleView (name) {
                this.imgName = name;
                this.visible = true;
            },
            handleRemove (file, index) {
                this.uploadList.splice(index, 1)
                this.$emit('toParent', this.uploadList);
            },
            handleSuccess (res, file) {
                // 因为上传过程为实例,这里模拟添加 url
                if (res.code === 200) {
                    // 子 ==> 父 组件通信
                    this.uploadList.push(res.data.img_path_0)
                    this.$emit('toParent', this.uploadList);
                }
            },
            handleFormatError (file) {
                this.$Notice.warning({
                    title: '文件格式不正确',
                    desc: '文件 ' + file.name + ' 格式不正确,请上传 jpg jpeg 或 png 格式的图片。'
                });
            },
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: '超出文件大小限制',
                    desc: '文件 ' + file.name + ' 太大,不能超过 2M。'
                });
            },
            handleBeforeUpload (file) {
                const check = this.uploadList.length < this.uploadObj.length;

 

                if (!check) {
                    this.$Notice.warning({
                        title: '最多只能上传 5 张图片。'
                    });
                }
                return check;
            },
            handleProcessUpload (file) {

 

            }
        }
    }
</script>
 
<style lang='less' type='text/less'>
 
</style>

上面的方法每选一张就上传一次图片,这种方式并不好



2:bse64 的方式,点提交再上传
// 上传之前返回false

handleBeforeUpload (file) {
        console.log('handleBeforeUpload ===> ', file);
        this.validImage(file);
        return false;
},

// ============================ 自定义方法 base64 ============================
            // 图片校验
            validImage (file) {
                // 图片大小长度动态
                // var obj = {
                //     length: 1, // 允许上传多少张图片
                //     size: 2097152, // 单张图片大小 B
                //     width: '',
                //     height: ''
                // }

                if (this.baseUploadArr.length < 3) {
                    if (file.size > 2097152) { // 单位 B
                        this.$Message.error(file.name + '大小超过2M')
                        this.file = null
                        return false;
                    } else if (!/image\/\w+/.test(file.type)) {
                        this.$Message.error('请上传以jpg、jpeg、png结尾的图片文件'); // FileExt.toLowerCase()
                        this.file = null
                        return false;
                    }
                    this.base64Image(file);
                } else {
                    this.$Message.warning('只能上传3张图片!')
                    return false;
                }
            },

            // 转 base 64
            base64Image (file) {
                let reader = new FileReader();
                reader.onload = (e) => {
                    this.baseUploadArr.push(e.target.result) // 将 base64 编码存储到路径数组中
                }
                reader.readAsDataURL(file)
                console.log('this.baseUploadArr ==> ', this.baseUploadArr)
            },

 

版权声明:程序员胖胖胖虎阿 发表于 2023年9月3日 上午1:24。
转载请注明:vue封装iview upload图片上传组件 | 胖虎的工具箱-编程导航

相关文章

暂无评论

暂无评论...