关于vue3 上传图片到七牛云
引子:
前端程序猿,很少写博客,担心有一些技术很牛逼的大佬看不上,还喜欢怼人,玻璃心容易影响心情,这个是我自己在项目上遇到的,也百度参考了很多大佬的文章,感觉多少有点不全,然后就自己整理一下,当一个笔记,也希望有需要的能直接用,不喜勿喷
参考文章:
https://blog.csdn.net/shishuwei111/article/details/100512646
https://blog.csdn.net/qq827245563/article/details/55207819
七牛云上传地址查询
https://developer.qiniu.com/kodo/1671/region-endpoint-fq
本文基于vue3，element-plus，没用ts，七牛云注册，配置存储一大堆，就不截图细说了，主要是以下一些代码，个人整理的，改改参数，安装依赖后应该可以直接用
tokenTools.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);
*/
import CryptoJS from 'crypto-js'
const dataJSON = {
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;
},
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);
*/
base64encode(str) {
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);
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;
},
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;
},
safe64(base64) {
base64 = base64.replace(/\+/g, "-");
base64 = base64.replace(/\//g, "_");
return base64;
},
// 我把获取生成token的放这里,然后直接用就行了
// scope 七牛云文件名,就比如你在广东区域创建的images3z文件夹下的文件
qiniuToken(AccessKey, SecretKey, scope = 'images3z') {
let timestamp = new Date().getTime() // 当前的时间戳
timestamp = parseInt(timestamp / 1000) + 36000
let putPolicy = {
'scope': scope, // 七牛云文件名,最好跟着改下
'deadline': timestamp
}
// SETP 2
let put_policy = JSON.stringify(putPolicy)
// SETP 3
let encoded = dataJSON.base64encode(dataJSON.utf16to8(put_policy));
// SETP 4
let hash = CryptoJS.HmacSHA1(encoded, SecretKey);
let encoded_signed = hash.toString(CryptoJS.enc.Base64);
// SETP 5
return AccessKey + ":" + dataJSON.safe64(encoded_signed) + ":" + encoded;
}
}
export default dataJSON
// ================================================
// 使用方法 npm install crypto-js
// 引入 import qiniuJSON from '@/utils/tokenTools'
// 使用 console.log(qiniuJSON.qiniuToken(AccessKey,SecretKey,scope))
上传组件封装
我用了vueuse/core实现父子组件的动态绑定 npm i @vueuse/core
<template>
<!-- 上传后显示 -->
<div class="uploadImage_qiniu">
<el-upload
class="upload-pic"
:action="props.domain"
:data="props.QiniuData"
:on-remove="handleRemove"
list-type="picture-card"
:on-error="uploadError"
:on-success="uploadSuccess"
:before-upload="beforeAvatarUpload"
:on-preview="handlePictureCardPreview"
:limit="1"
:on-exceed="handleExceed"
:file-list="props.fileList"
>
<el-icon><Plus /></el-icon>
</el-upload>
<el-dialog v-model="dialogVisible">
<img
w-full
class="uploadPicUrl"
:src="props.uploadPicUrl"
alt="Preview Image"
/>
</el-dialog>
</div>
</template>
<script setup>
import { ref, defineProps, defineEmits, watch } from "vue";
import { Plus } from '@element-plus/icons-vue'
import qiniuJSON from '@/utils/tokenTools'
import { ElMessage } from 'element-plus'
import { useVModel } from '@vueuse/core'
// 初始值
let props = ref({})
props = {
qiNiu: {
AccessKey: '',
SecretKey: ''
},
// headers: { 'Content-Type': 'application/json' },
QiniuData: {
name: '/jiancai',
key: '', // 图片名字处理
token: '' // 七牛云token
},
domain: 'https://upload-z2.qiniup.com', // 七牛云的上传地址（华南区）
qiniuaddr: 'http://zximg.666.ren', // 七牛云的图片外链地址
uploadPicUrl: '', // 提交到后台图片地址
fileList: [], //[{ name: '我试试', url: '' }]
loading: false
}
// 初始值
const propsValue = defineProps({
modelValue: String
})
const emit = defineEmits(['update:modelValue'])
let imageUrl = useVModel(propsValue, 'modelValue', emit)
props.fileList = ![undefined, null, ''].includes(propsValue.modelValue) ? [{ name: '', url: imageUrl }] : []
// 获取七牛云token
props.QiniuData.token = qiniuJSON.qiniuToken(props.qiNiu.AccessKey, props.qiNiu.SecretKey,'images3z')
let handleRemove = (file, fileList) => {
console.log(0)
props.uploadPicUrl = ''
props.fileList = []
}
let handleExceed = (files, fileList) => {
ElMessage.warning(
`当前仅能选择 1 张图片,请情况重新选择！`
)
}
let beforeAvatarUpload = (file) => {
props.uploadPicUrl = ''
props.fileList = []
console.log(2)
const isPNG = file.type === 'image/png'
const isJPEG = file.type === 'image/jpeg'
const isJPG = file.type === 'image/jpg'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isPNG && !isJPEG && !isJPG) {
ElMessage.error('上传头像图片只能是 jpg、png、jpeg 格式!')
return false
}
if (!isLt2M) {
ElMessage.error('上传头像图片大小不能超过 2MB!')
return false
}
props.QiniuData.key = `jiancai/upload_pic_${file.name}`// 根目录文件夹
}
let uploadSuccess = (response, file, fileList) => {
console.log(3)
props.uploadPicUrl = `${props.qiniuaddr}/${response.key}`
props.fileList = [{ name: response.key, url: props.uploadPicUrl }]
}
let uploadError = (err, file, fileList) => {
console.log(4)
ElMessage({
message: '上传出错，请重试！',
type: 'error',
center: true
})
}
// 点击图片放大
let dialogVisible = ref('')
dialogVisible.value = false
const handlePictureCardPreview = () => {
dialogVisible.value = true
}
</script>
<style lang="scss">
.uploadImage_qiniu {
.el-dialog {
padding-bottom: 20px;
img {
width: 95%;
margin: 20px auto;
}
}
}
</style>
使用方法如下
<wangEditor v-model="form.content"></wangEditor>
