vue element-ui 上传文件到七牛云
很多人对于上传文件还是有一定的恐惧感，作为一个前端工程师来说，好像上传就应该来后端去做，但今天，我想给大家推荐写一下自己使用vue上传文件的心得，可以使用vue就可以直接上传到七牛云，写的不好勿喷。其实接触vue的时间并不长，以前都用的是ng,但mvvm框架学起来还是比较好学的 尤其是vue有自己的ui框架 element-ui,现在开始使用：用别人的东西，当然要看文档了，先看看这个这个是elem
·
很多人对于上传文件还是有一定的恐惧感，作为一个前端工程师来说，好像上传就应该来后端去做，但今天，我想给大家推荐写一下自己使用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 <iz@onicos.co.jp>
* 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，会的人请指教
前往低代码交流专区
更多推荐
11
0- 0
已为社区贡献2条内容
所有评论(0)