elementui 上傳圖片到七牛雲上面去,可以多張上傳 【簡單/有效】
阿新 • • 發佈:2018-11-17
目的: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 :這個表示不是立即上傳