vue element upload 七牛雲實現檔案上傳(還沒有分片和斷點續傳)
阿新 • • 發佈：2021-06-18
程式碼沒有排版,只是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 媽媽再也不用擔心