elementui 上传图片到七牛云上面去，可以多张上传 【简单/有效】

本文主要是介绍elementui 上传图片到七牛云上面去，可以多张上传 【简单/有效】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

目的：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: '',     //选中的某张图片的 urldialogVisible: false,    //图片原图展示框uploadQiniuUrl:"https://upload.qiniup.com",   //七牛云服务器地址         qiniuData:{             //上传图片携带的参数token : "",key : "",},

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

methods:{getToken(){  //上传之前获取 tokenvar url1 = this.$store.state.frontUrl + "/getQiniuToken?bucket=xdx97-album";this.$ajax.get(url1).then( response => {//获取 tokenthis.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  ：这个表示不是立即上传

 

 

这篇关于elementui 上传图片到七牛云上面去，可以多张上传 【简单/有效】的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---