最近因為項目中用到了七牛上傳，因此封裝了個組件，以便提高效率。

注：七牛 JavaScript SDK使用指南官網(wǎng)

下載七牛并引入靜態(tài)資源

• 可在倉庫[qiniu/js-sdk]('git clone https://github.com/qiniu/js-sdk.git')中dist獲取sdk
• 在頁面中引入 qiniu.min.js，plupload.full.min.js

組件代碼

html部分

<template>
    <div class="upload">
        <div class="upload-pickfiles-lists" v-for="n in uploadurl.length">
            <div class="xg-upload-pickfiles">
                <img :src="uploadurl[n]">
            </div>
            <a @click="del($index)">刪除</a>
        </div>
        <div :id="container" class="upload-container">
            <div class="upload-pickfiles" :id="pickfiles" v-if="uploadurl.length < max">
            </div>
        </div>
    </div>
</template>

js部分

module.exports = {
        props:{
            // 最大上傳數(shù)量
            max:{
                type:Number,
                twoWay:true
            }, 
            // 返回的上傳地址
            uploadurl:{
                type: Array,
                twoWay:true,
            },
            // 拖拽區(qū)域
            container:{
                type: String,
                twoWay:false
            },
            // inputID
            pickfiles:{
                type: String,
                twoWay:false
            },
            // 多選上傳
            multiple:{
                type:Boolean,
                twoWay: false
            }
        },
        ready(){
            this.qiniu();
        },
        methods:{

            qiniu(){
                const self = this;
                const uploader = Qiniu.uploader({
                     runtimes: 'html5,flash,html4',    //上傳模式,依次退化
                            browse_button: self.pickfiles,       //上傳選擇的點選按鈕，**必需**
                            uptoken_url: '/token',            //Ajax請求upToken的Url，**強(qiáng)烈建議設(shè)置**（服務(wù)端提供）
                            // uptoken : '', //若未指定uptoken_url,則必須指定 uptoken ,uptoken由其他程序生成
                            // unique_names: true, // 默認(rèn) false，key為文件名。若開啟該選項，SDK為自動生成上傳成功后的key（文件名）。
                            // save_key: true,   // 默認(rèn) false。若在服務(wù)端生成uptoken的上傳策略中指定了 `sava_key`，則開啟，SDK會忽略對key的處理
                            domain: 'http://qiniu-plupload.qiniudn.com/',   //bucket 域名，下載資源時用到，**必需**
                            get_new_uptoken: false,  //設(shè)置上傳文件的時候是否每次都重新獲取新的token
                            container: self.container,           //上傳區(qū)域DOM ID，默認(rèn)是browser_button的父元素，
                            max_file_size: '100mb',           //最大文件體積限制
                            flash_swf_url: 'js/plupload/Moxie.swf',  //引入flash,相對路徑
                            max_retries: 3,                   //上傳失敗最大重試次數(shù)
                            dragdrop: true,                   //開啟可拖曳上傳
                            drop_element: 'container',        //拖曳上傳區(qū)域元素的ID，拖曳文件或文件夾后可觸發(fā)上傳
                            chunk_size: '4mb',                //分塊上傳時，每片的體積
                            auto_start: true,                 //選擇文件后自動上傳，若關(guān)閉需要自己綁定事件觸發(fā)上傳
                            multi_selection:self.multiple,   //多選上傳
                    filters : {
                        max_file_size : '100mb',
                        prevent_duplicates: true,
                        mime_types: [
                            { title : 'Image files', extensions : 'JPEG,jpg,png' }, // 限定jpg,gif,png后綴上傳
                            ]
                        },
                        init: {
                        // 'FilesAdded': function (up, files) {
                        //     $('table').show();
                        //     $('#success').hide();
                        //     plupload.each(files, function (file) {
                        //     });
                        // },
                        // BeforeUpload(up, file) {
                        // },
                        // 'UploadProgress': function (up, file) {

                        // },
                        // 'UploadComplete': function () {

                        // },
                        FileUploaded(up, file, info) {
                            const domain = up.getOption('domain');
                            const res = JSON.parse(info);
                            const sourceLink = domain + res.key;
                            self.uploadurl.push(sourceLink);
                            console.info(self.uploadurl);
                        },
                        Error(up, err, errTip) {
                            // $('table').show();
                            // const progress = new FileProgress(err.file, 'fsUploadProgress');
                            // progress.setError();
                            // progress.setStatus(errTip);
                        }
                    }
                });
            },
            del(index){
                this.uploadurl.splice(index, 1);
            }
        }
    };

使用組件

import upload from './../components/upload.vue';
components: {
      upload,
    },

<upload :uploadurl="uploadimgs" :pickfile ="pickfiles" : multiple="true">
                <div slot="upload">
                  <div :id="pickfiles" class="btn">點擊添加門店logo/照片<img :src="uploadimgs" class="uploadimg"></div>
                </div>
              </upload>

這樣就可以愉快地上傳了

• 如有遺漏或不恰之處，敬請見諒并指出