目的：elementui 上传多张图片到七牛云上面去 

 

第一步：效果说明

七牛云显示：
 

第二步：代码

 

2-1、这里会用到两个小东西，一个是 后台获取 token，一个是获取一个随机不重复字符串（uuid用来做上传文件的名称）

token 获取：http://www.xdx97.com/#/single?bid=c82a7a0e-4cfe-a0d4-419a-47c22a05b84d

前台获取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>

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  ：这个表示不是立即上传