vue element upload 七牛云实现文件上传(还没有分片和断点续传)
代码没有排版,只是demo,轻喷哈哈哈
vue：
父组件HelloWorld.vue
<template>
<div>
<div>
<h1>上传组件</h1>
<label>
<img src="../assets/upload.svg">
<input hidden
ref="uploadInput"
type="file"
@change="chooseImg">
</label>
</div>
<div>
<ImgShow :imgValue="imgValue"
:url="url" />
</div>
<div class="show">
<img :src="url"
alt="">
</div>
<div>
<button @click="download">下载文件</button>
</div>
</div>
</template>
<script>
import axios from 'axios'
import CryptoJS from 'crypto-js'
import { base64encode, utf16to8, safe64 } from '../utils/index.js'
import ImgShow from './ImgShow.vue'
export default {
name: 'HelloWorld',
data () {
return {
imgValue: {},
url: '',
filename: ''
}
},
components: {
ImgShow
},
methods: {
chooseImg () {
let file = this.$refs.uploadInput.files[0]
let filename = file.name
this.filename = filename
let imgUrl = URL.createObjectURL(file)
let title = Math.random() * 10
// this.imgValue = { imgUrl, title }
// this.imgValue.imgUrl = imgUrl
// this.imgValue.title = title
// this.$set(this.imgValue, 'imgUrl', imgUrl)
this.$set(this.imgValue, 'title', title)
this.url = imgUrl
//构造1小时的时间戳
let hour = 1
let deadline = Math.round(new Date().getTime() / 1000) + 3600 * hour
let putPolicy = {
// 设置上传到哪一个空间
scope: 'lceihen',
// 设置上传口令的有效时间
deadline: +deadline
}
let AccessKey = '045-g3N_C_waBCEi-Sb8r5vf-nZYfmpFx53WsCS6'
let SecretKey = '0ahErSbUxhCwqap_TtzmA1hzk29yw8PN0WBl3PdG'
let token = this.genUpToken(AccessKey, SecretKey, putPolicy)
this.uploadFn(file, token, filename)
},
genUpToken (accessKey, secretKey, putPolicy) {
//SETP 2
var put_policy = JSON.stringify(putPolicy);
console && console.log("put_policy = ", put_policy);
//SETP 3
var encoded = base64encode(utf16to8(put_policy));
console && console.log("encoded = ", encoded);
//SETP 4
var hash = CryptoJS.HmacSHA1(encoded, secretKey);
var encoded_signed = hash.toString(CryptoJS.enc.Base64);
console && console.log("encoded_signed=", encoded_signed)
//SETP 5
var upload_token = accessKey + ":" + safe64(encoded_signed) + ":" + encoded;
console && console.log("upload_token=", upload_token)
return upload_token;
},
async uploadFn (file, token, filename) {
// const self = this
let uploadUrl = 'http://up-z2.qiniup.com'
let formData = new FormData()
formData.append('key', filename)//注意上传的key必须个性化，不然内容不同，名字相同上传会错误,new Date().getTime()
formData.append('token', token)
formData.append('file', file)
let config = {
headers: {
"Content-Type": "multipart/form-data"
}
}
let data = await axios.post(uploadUrl, formData, config)
let url = 'http://qutty9hu1.hn-bkt.clouddn.com/'
console.log('----', url + data.data.key)
this.url = url + data.data.key
},
// 文件下载
download () {
// await axios.post(this.url, {}, { //这种应用于下载的接口是post请求 的
// responseType: 'blob'
// }).then((res) => {
// const blob = res.data;
// const reader = new FileReader();
// reader.readAsDataURL(blob);
// reader.onload = (e) => {
// const a = document.createElement('a');
// a.download = `文件名称.zip`;
// a.href = e.target.result;
// document.body.appendChild(a);
// a.click();
// document.body.removeChild(a);
// };
// }).catch((err) => {
// console.log(err);
// });
const a = document.createElement('a');
a.download = `文件名称.zip`;
a.href = `http://qutty9hu1.hn-bkt.clouddn.com/postman.zip`
document.body.appendChild(a);
a.click();
}
},
mounted () {
}
}
</script>
<style scoped lang="scss">
.hello {
.wrap {
color: #00ff00;
}
}
.show {
img {
width: 100px;
height: 100px;
}
}
img {
width: 100px;
height: 100px;
}
</style>
子组件
<template>
<div>
<h1>图片显示:</h1>
<h3>{{imgValue.title ||` 上传图片标题`}} </h3>
<div class="imgshow">
<h1>上传成功图片显示</h1>
<img :src="imgValue.imgUrl || `暂无上传图片链接`">
</div>
</div>
</template>
<script>
export default {
name: 'ImgShow',
data () {
return {
}
},
// watch: {
// 'imgValue': {
// handler (newName) {
//
// },
// deep: true,
// immediate: true
// },
// },
// computed: {
// myname: function () {
// return this.imgValue.title + this.imgValue.imgUrl
// }
// },
props: {
imgValue: {
type: Object,
default () {
return {
}
}
},
url: {
type: String,
default: ''
}
}
}
</script>
<style lang="scss" scoped>
.imgshow {
width: 400px;
height: 400px;
box-sizing: border-box;
border: 1px solid black;
img {
display: flex;
width: 100%;
height: 100%;
}
}
</style>
加密函数(直接采用七牛云加密策略)
export 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;
}
export 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 = imgUrl(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);
export 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;
}
export 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;
}
export function safe64 (base64) {
base64 = base64.replace(/\+/g, "-");
base64 = base64.replace(/\//g, "_");
return base64;
}
记得安装
import CryptoJS from 'crypto-js'
推荐一款炒鸡逆天插件 REST Client 妈妈再也不用担心
浙公网安备 33010602011771号