elementui 上傳圖片到七牛雲上面去，可以多張上傳 【簡單/有效】

目的：elementui 上傳多張圖片到七牛雲上面去 

第一步：效果說明

七牛雲顯示：

第二步：代碼

2-1、這裏會用到兩個小東西，一個是 後臺獲取 token，一個是獲取一個隨機不重複字符串（uuid用來做上傳文件的名稱）

token 獲取：https://blog.csdn.net/Tomwildboar/article/details/82959736

前臺獲取uuid代碼：因爲這裏用不到了vue 所以前面有個前綴（放在 main.js 裏面），你也可以用自己的生成方法

//用於生成uuid
Vue.prototype.S4 = function(){
    return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
}
Vue.prototype.guid = function() {
    return (this.S4()+this.S4()+"-"+this.S4()+"-"+this.S4()+"-"+this.S4()+"-"+this.S4()+this.S4()+this.S4());
}

2-2html代碼

 <el-upload
                :action="uploadQiniuUrl"
                ref="upload"
                list-type="picture-card"
                :auto-upload=false
                :data="qiniuData"
                :before-upload="beforeUploadGetKey"
                :on-preview="handlePictureCardPreview"
                >
                <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
       </div>

2-3  變量定義  vue 直接放在 data(){ return {   } }

說明一下這個 url    https://developer.qiniu.com/kodo/manual/1671/region-endpoint

 dialogImageUrl: '',     //選中的某張圖片的 url
            dialogVisible: false,    //圖片原圖展示框
      
            uploadQiniuUrl:"https://upload.qiniup.com",   //七牛雲服務器地址         
            qiniuData:{             //上傳圖片攜帶的參數
                token : "",
                key : "",
            },

2-4：各種方法  （直接放在 methods: 裏面）

    methods:{
        getToken(){  //上傳之前獲取 token
            var url1 = this.$store.state.frontUrl + "/getQiniuToken?bucket=xdx97-album";
            this.$ajax.get(url1)
            .then( response => {
                //獲取 token
                this.qiniuData.token = response.data.token;  
            })
        },
        submitUpload() {   //提交上傳
            this.$refs.upload.submit();
        },
        beforeUploadGetKey() {   //每個文件上傳之前 給它一個 名字
             this.qiniuData.key = this.guid();      
        },



        handlePictureCardPreview(file) {   //查看某張圖片的原圖
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },

    }

2-5：初始化方法

    created(){
        this.getToken();   //獲取token
    },

2-6：上傳按鈕

 <el-button type="primary" class="buttonupload" @click="submitUpload">上傳圖片</el-button>

第三步：解釋說明 （不想看的可以略過）

 

1、  :before-upload="beforeUploadGetKey"   ： 每次上傳文件（多個文件同時上傳也是每個上傳之前都會調用這個方法。所以在這裏可以做一些上傳之前的準備工作，比如 給文件命名）

2、 :on-preview="handlePictureCardPreview" ： 這個其實個上傳文件沒有什麼關係，這是隻是當你把鼠標放在要上傳的文件上，上面會顯示一個放大的按鈕，這個主要是 放大顯示圖片的

3、  :auto-upload=false  ：這個表示不是立即上傳