vue封裝iview upload圖片上傳組件

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)

            },