vue element-ui 上傳檔案到七牛雲
很多人對於上傳檔案還是有一定的恐懼感,作為一個前端工程師來說,好像上傳就應該來後端去做,但今天,我想給大家推薦寫一下自己使用vue上傳檔案的心得,可以使用vue就可以直接上傳到七牛雲,寫的不好勿噴。
其實接觸vue的時間並不長,以前都用的是ng,但mvvm框架學起來還是比較好學的 尤其是vue有自己的ui框架 element-ui,
現在開始使用:
用別人的東西,當然要看文件了,先看看這個
<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload>
上面是vue 頁面中的內容 文件中有
接下來我會修改一部分內容 注意了
<el-upload class="avatar-uploade" :multiple="true" :action="actionPath" accept="image/jpeg,image/gif,image/png,image/bmp" :before-upload="beforeAvatarUpload" :data="postData" :on-success="handleAvatarSuccess"> <img v-if="imageUrl" :src="imageUrl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload>
對比處中間的變化了麼
1、多了個data 這個data 就是我們要傳遞的引數,這個引數就是upToken值,我們需要傳遞給七牛雲的憑證,一會兒給大家說,這個憑證怎麼生成
2、 action 前加了":" 因為這裡要放七牛雲的地址
actionPath:'https://upload.qiniup.com', // 放在哪裡我就不說了啊
這些弄好之後接下來是重頭戲了 就是upToken的生成,一般都是後端給的,但是前端也可以實現,我們就在這裡以前端的方法實現它 後端實現的思路其實也是一樣的
我在這裡寫了個元件 名字叫qiniuToken,中間有base64加密 我嫌煩就把生成token寫一起了,想分開的可以分開
具體程式碼如下:
/**
* Created by guohongjun on 2018/4/18.
* 使用者相關api
*/
import CryptoJS from 'crypto-js'
/* utf.js - UTF-8 <=> UTF-16 convertion
*
* Copyright (C) 1999 Masanao Izumo <[email protected]>
* Version: 1.0
* LastModified: Dec 25 1999
* This library is free. You can redistribute it and/or modify it.
*/
/*
* Interfaces:
* utf8 = utf16to8(utf16);
* utf16 = utf8to16(utf8);
*/
function utf16to8(str) {
var out, i, len, c;
out = "";
len = str.length;
for (i = 0; i < len; i++) {
c = str.charCodeAt(i);
if ((c >= 0x0001) && (c <= 0x007F)) {
out += str.charAt(i);
} else if (c > 0x07FF) {
out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
} else {
out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
}
}
return out;
}
function utf8to16(str) {
var out, i, len, c;
var char2, char3;
out = "";
len = str.length;
i = 0;
while (i < len) {
c = str.charCodeAt(i++);
switch (c >> 4) {
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
case 6:
case 7:
// 0xxxxxxx
out += str.charAt(i - 1);
break;
case 12:
case 13:
// 110x xxxx 10xx xxxx
char2 = str.charCodeAt(i++);
out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
break;
case 14:
// 1110 xxxx 10xx xxxx 10xx xxxx
char2 = str.charCodeAt(i++);
char3 = str.charCodeAt(i++);
out += String.fromCharCode(((c & 0x0F) << 12) | ((char2 & 0x3F) << 6) | ((char3 & 0x3F) << 0));
break;
}
}
return out;
}
/*
* Interfaces:
* b64 = base64encode(data);
* data = base64decode(b64);
*/
var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";
var base64DecodeChars = new Array(-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 62, -1, -1, -1, 63,
52, 53, 54, 55, 56, 57, 58, 59, 60, 61, -1, -1, -1, -1, -1, -1, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14,
15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, -1, -1, -1, -1, -1, -1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40,
41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, -1, -1, -1, -1, -1);
function base64encode(str) {
var out, i, len;
var c1, c2, c3;
len = str.length;
i = 0;
out = "";
while (i < len) {
c1 = str.charCodeAt(i++) & 0xff;
if (i == len) {
out += base64EncodeChars.charAt(c1 >> 2);
out += base64EncodeChars.charAt((c1 & 0x3) << 4);
out += "==";
break;
}
c2 = str.charCodeAt(i++);
if (i == len) {
out += base64EncodeChars.charAt(c1 >> 2);
out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
out += base64EncodeChars.charAt((c2 & 0xF) << 2);
out += "=";
break;
}
c3 = str.charCodeAt(i++);
out += base64EncodeChars.charAt(c1 >> 2);
out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
out += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
out += base64EncodeChars.charAt(c3 & 0x3F);
}
return out;
}
function base64decode(str) {
var c1, c2, c3, c4;
var i, len, out;
len = str.length;
i = 0;
out = "";
while (i < len) {
/* c1 */
do {
c1 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
} while (i < len && c1 == -1);
if (c1 == -1) break;
/* c2 */
do {
c2 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
} while (i < len && c2 == -1);
if (c2 == -1) break;
out += String.fromCharCode((c1 << 2) | ((c2 & 0x30) >> 4));
/* c3 */
do {
c3 = str.charCodeAt(i++) & 0xff;
if (c3 == 61) return out;
c3 = base64DecodeChars[c3];
} while (i < len && c3 == -1);
if (c3 == -1) break;
out += String.fromCharCode(((c2 & 0XF) << 4) | ((c3 & 0x3C) >> 2));
/* c4 */
do {
c4 = str.charCodeAt(i++) & 0xff;
if (c4 == 61) return out;
c4 = base64DecodeChars[c4];
} while (i < len && c4 == -1);
if (c4 == -1) break;
out += String.fromCharCode(((c3 & 0x03) << 6) | c4);
}
return out;
}
var safe64 = function(base64) {
base64 = base64.replace(/\+/g, "-");
base64 = base64.replace(/\//g, "_");
return base64;
};
var genUpToken = function(accessKey, secretKey, putPolicy) {
//SETP 2
var put_policy = JSON.stringify(putPolicy);
//SETP 3
var encoded = base64encode(utf16to8(put_policy));
//SETP 4
var hash = CryptoJS.HmacSHA1(encoded, secretKey);
var encoded_signed = hash.toString(CryptoJS.enc.Base64);
//SETP 5
var upload_token = accessKey + ":" + safe64(encoded_signed) + ":" + encoded;
return upload_token;
};
export {
genUpToken
}
中間有es6的寫法,不會的自己看看去,不難
具體引入
import {genUpToken} from "../../common/qiniuToken";
接下來還沒完成呢
我們需要生成這個token
var token;
var policy = {};
var bucketName = 'zhizhuoedu';
var AK ='你的七牛雲AK';
var SK = '你的七牛雲SK';
var deadline = Math.round(new Date().getTime() / 1000) + 3600;
policy.scope = bucketName;
policy.deadline = deadline;
token=genUpToken(AK, SK, policy);
this.postData.token=token;
這一段程式碼最好寫在created裡 或者你單獨拿出來寫成個元件。
接下來就是上傳額
這裡給大家解釋一下下面程式碼中函式的意思
<script>
export default {
data() {
return {
imageUrl: ''
};
},
methods: {
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上傳頭像圖片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上傳頭像圖片大小不能超過 2MB!');
}
return isJPG && isLt2M;
}
}
}
</script>
beforeAvatarUpload //這個函式是上傳之前進行的操作,我們在這裡可以限制上傳檔案的大小,包括型別,百度一大堆,就不多說了
handleAvatarSuccess // 這個是上傳成功後的操作,你可以打印出來file 得到的有一個key
最後 根據你七牛雲上繫結的域名 拼接了這個key 就是你上傳檔案的地址了
我的是這麼寫的
this.imageUrl = 'http://你的域名地址.com/'+ res.key
本文純屬自己開發總結經驗,有些時候前端也可以分擔一部分壓力,沒必要全部交給後端去做,那怎麼體現我們價值,寫的不好勿噴,我頭一次在csdn上寫技術部落格
注:我的地址是華北地區,action 根據自己的需求去改,不能一概而論。不懂的 七牛雲上有這部分的詳細介紹,這裡就不多說了,歡迎來看,最近在學python,會的人請指教
相關推薦
vue element-ui 上傳檔案到七牛雲
很多人對於上傳檔案還是有一定的恐懼感,作為一個前端工程師來說,好像上傳就應該來後端去做,但今天,我想給大家推薦寫一下自己使用vue上傳檔案的心得,可以使用vue就可以直接上傳到七牛雲,寫的不好勿噴。其實接觸vue的時間並不長,以前都用的是ng,但mvvm框架學起來還是比較好學
ueditor上傳檔案七牛雲
準備工作 ueditor外掛:百度雲下載資源: https://pan.baidu.com/s/1EL_hoJGTyZEf49WX0KQfvA Ueditor下載官網https://ueditor.baidu.com/website/download.html 第一 匯入Maven專案中
laravel +vue+element-UI上傳圖片到七牛
element-UI上傳元件 <el-form-item label="縮圖" prop="photo_id"> <el-upload class="avatar-uploader"
C# 檔案上傳到七牛雲伺服器(一)
本章講述:C# 中呼叫七牛雲提供的SDK,實現檔案簡單上傳功能。 分片,斷點續上傳講解,請檢視:C# 檔案上傳到七牛雲伺服器(二) 地址為: 開發流程步驟地址:https://blog.csdn.net/BYH371256/article/details/79868562 1、把
使用vue-image-crop-upload剪裁圖片通過thinkphp5上傳到七牛雲
在此工作之前必須有七牛雲賬號和七牛雲已經建立好的空間,在賬號中可以獲取到 ACCESSKEY 和 SECRETKEY。 vue-image-crop-upload的使用方法可以參考官方的用法,如何需要滿足自己的需求,可進行一定的修改再封裝成自己的元件進行使用。 vue-image-crop-
C# 檔案上傳到七牛雲伺服器(二)
本章講述:C# 中呼叫七牛雲提供的SDK,實現檔案分片上傳、支援斷點續上傳、暫停/繼續、進度回撥顯示 檔案簡單上傳講解,請檢視:C# 檔案上傳到七牛雲伺服器(一) 地址為: 新建類,儲存相關引數,引數註釋可參考:C# 檔案上傳到七牛雲伺服器(一) //七牛雲預設引
tp3.2檔案上傳到七牛雲方法
因為tp3.2框架本身就自帶七牛雲上傳外掛,所以我們只需要配置就可以了。 一、在這裡有個前提那就是大家要有七牛雲的賬號來獲取:accessKey,secrectKey,domain,bucket 二、然後在config裡面新增配置: 'UPLOAD_SITEIMG_
Element-ui上傳檔案大小限制
element上傳元件中的 :before-upload方法 在methods中寫入 beforeUpload(file) { var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
Tp3.1 文件上傳到七牛雲
pos use ast releases 文件上傳 storage u2l image ID TP3.1 中不支持Composer 就無法用composer 安裝 下載歷史的SDK https://github.com/qiniu/php-sdk/releases/
Tp3如何實現本地視頻文件上傳到七牛雲
orm slist 4類 .net 指定 命名 lis xxxxxxxx ESS 對於七牛雲的使用,估計有些剛接觸開發的技術人員還不太清楚,那麽更不要說如何實現本地視頻上傳到七牛雲轉儲了,其實這個技術並沒有想象中的那麽困難,下面就來跟大家詳細介紹一下流程: 1、首先我們
使用ueditor上傳到七牛雲
1、弄了兩三天了,開始改的是ueditor.jar中的原始碼上傳到七牛雲,之後發現上傳時檔案太大(100MB)導致超過了響應時間前臺報錯,而且前臺的上傳進度也看不出來,所以只能採用js-sdk中的方式 2、ueditor使用的是WebUploader上傳方式,七牛雲中提供的
springboot webuploader 圖片上傳至七牛雲。
首先要註冊七牛雲。 後端 pom.xml 檔案配置依賴外掛。 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring
vue+element ui +vue-quill-editor 富文本圖片上傳到騎牛雲
temp created 編輯 展示 這不 tour ng- inpu pla vue-quill-editor上傳圖片會轉換成base64格式,但是這不是我們想要的,之後翻了很多文章才找到想要的,下面直接上代碼 <style lang="sass">.quil
vue + element-ui + axios 多檔案加表單引數上傳
vue加element ui 寫的一個專案,請求用的 axios 。在做表單提交的時候常常遇到需要在表單中傳檔案或者圖片,一般處理起來是先單個傳完檔案後得到路徑然後再表單提交一起傳給後端。如果介面是必須和表單其他引數一起傳過去的時候操作起來就是下面要講的了。 ps:介面是我寫
java圖片上傳-檔案/圖片上傳到七牛
java圖片上傳-檔案(圖片)上傳到七牛 一、在配置檔案中引入依賴(注:七牛開發者url:https://developer.qiniu.com/kodo) <-- 引入依賴 --> <dependency> <
vue的Element元件上傳檔案el-upload上傳成功後清空
<el-upload action="#" ref="upload" list-type="picture" :show-file-list="true" :limit="1" :http-req
vue中使用vue-quill-editor富文字編輯器,自定義toolbar,圖片上傳到七牛
一、npm 安裝 vue-quill-editor 二、在main.js中引入 import VueQuillEditor from 'vue-quill-editor' // require styles 引入樣式 import 'quill/dist/quill.c
C# 分片斷點續傳到七牛雲伺服器(一)----開發過程參考檔案
前段時間做了一個專案:在WPF上,實現檔案上傳到七牛雲伺服器和從伺服器中檔案下載的功能; 下面分享開發的主要步驟: C# 分片斷點續傳到七牛雲伺服器(一) 開發過程參考 1、七牛雲開發者中心:https://developer.qiniu.com/ &n
基於vue element 封裝上傳元件
基於vue element封裝的上傳元件 使用方法: 1.首先引入該元件 2.註冊元件 3.頁面使用 4.回撥函式(如需其他回撥自行封裝 因為我暫時沒用到其他的 哈哈哈) <template>
Vue Element-ui 框架 限制檔案型別
1.驗證上傳檔案的型別: (1)驗證圖片型別 (2)驗證壓縮包 (3)驗證.txt檔案 2.回車提交內容 原生的input,使用 @keyup.enter就可以,但使用element-ui,則要加上native限制符,因為element-ui把input進行了封裝,原事件就不起作用了,程式碼如下: