前端vue+element-ui上传图片至七牛，并返回外链URL至后台

/08/12

上传文件到七牛云

注册登陆到七牛云，需要认证信息才能创建个人存储空间;

注册等步骤省略

代码

html

<el-uploadclass="upload-pic":action="domain":data="QiniuData":on-remove="handleRemove":on-error="uploadError":on-success="uploadSuccess":before-remove="beforeRemove":before-upload="beforeAvatarUpload"multiple:limit="1":on-exceed="handleExceed":file-list="fileList"><el-button size="small" type="primary">点击上传图片</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div></el-upload><div><img class="pic-box" :src="uploadPicUrl" v-if="uploadPicUrl"></div><div>{{uploadPicUrl}}</div>

data

data(){QiniuData: {key: "", //图片名字处理token: "" //七牛云token},domain: "http://up-", // 七牛云的上传地址（华南区）qiniuaddr: "https://??????.com/", // 七牛云的图片外链地址 你的七牛云里配置有uploadPicUrl: "", //提交到后台图片地址fileList: [],nowTime:'',fileExtension:''}

在这之前，我们需要一个token,token可以是向后台要，也可以自己生成。这里讲一下自己生成。

首先需要import一个文件，这个JS文件我直接给出了，不是我写的，注释里有copyright

/*** Created by guohongjun on /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:// 0xxxxxxxout += str.charAt(i - 1);break;case 12:case 13:// 110x xxxx 10xx xxxxchar2 = str.charCodeAt(i++);out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));break;case 14:// 1110 xxxx 10xx xxxx 10xx xxxxchar2 = 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 2var put_policy = JSON.stringify(putPolicy);//SETP 3var encoded = base64encode(utf16to8(put_policy));//SETP 4var hash = CryptoJS.HmacSHA1(encoded, secretKey);var encoded_signed = hash.toString(CryptoJS.enc.Base64);//SETP 5var upload_token = accessKey + ":" + safe64(encoded_signed) + ":" + encoded;return upload_token;};export {genUpToken}

然后在你用到的地方引入

个人习惯放在static/comm下

import {genUpToken} from "../../../static/comm/qiniu/qiniuToken";

create()

created(){this.nowTime = this.getDate();console.log(this.nowTime)var token;var policy = {};var bucketName = '???';//你的七牛桶名称var AK ='????'; //你的七牛AKvar SK = '????';//你的七牛SKvar deadline = Math.round(new Date().getTime() / 1000) + 3600;policy.scope = bucketName;policy.deadline = deadline;token=genUpToken(AK, SK, policy);this.QiniuData.token=token;console.log(this.QiniuData.token);},

method()

//upload的生命周期函数见element-ui官方文档 /#/zh-CN/component/upload#methodshandleRemove(file, fileList) {this.uploadPicUrl = "";},handleExceed(files, fileList) {this.$message.warning(`当前限制选择 1 张图片，如需更换，请删除上一张图片在重新选择！`);},beforeAvatarUpload(file) {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) {this.$message.error("上传头像图片只能是 jpg、png、jpeg 格式!");return false;}if (!isLt2M) {this.$message.error("上传头像图片大小不能超过 2MB!");return false;}const isSize = new Promise(function(resolve, reject) {let width = 100;let height = 100;let _URL = window.URL || window.webkitURL; let img = new Image();img.onload = function() {//在这里可以获取你上传图片的宽高size console.log(`img.width:${img.width} img.height:${img.height} img.size:${file.size}`)let valid = img.width >= width && img.height >= height;valid ? resolve() : reject();}img.src = _URL.createObjectURL(file);}).then(() => {return file;}, () => {this.$message.error('上传的icon必须是等于或大于100*100!');return Promise.reject();});console.log(this.nowTime);//这个this.fileExtension是文件名的后缀this.fileExtension = file.name.split(".").pop();console.log(this.fileExtension);//这里的key给加上了时间戳，目的是为了防止上传冲突this.QiniuData.key = `upload_pic_${this.nowTime}.${this.fileExtension}`;},uploadSuccess(response, file, fileList) {console.log(fileList);this.uploadPicUrl = `${this.qiniuaddr}/${response.key}`;console.log(this.uploadPicUrl);//在这里你就可以获取到上传到七牛的外链URL了},uploadError(err, file, fileList) {this.$message({message: "上传出错，请重试！",type: "error",center: true});},beforeRemove(file, fileList) {// return this.$confirm(`确定移除 ${ file.name }？`);},//以下是时间戳函数getDate(){var myDate = new Date();//获取当前年var year = myDate.getFullYear();//获取当前月var month = myDate.getMonth() + 1;//获取当前日var date = myDate.getDate();var h = myDate.getHours(); //获取当前小时数(0-23)var m = myDate.getMinutes(); //获取当前分钟数(0-59)var s = myDate.getSeconds();//获取当前时间var now = year + '_' + this.conver(month) + "_" + this.conver(date) + "_" + this.conver(h) + '_' + this.conver(m) + "_" + this.conver(s);return now;},conver(s) {return s < 10 ? '0' + s : s;},

到了这一步已经可以上传图片至七牛云了，并且外链URL也被保存下来了，data()里的this.uploadPicUrl，这就是外链了。

data()里的this.fileExtension这就是后缀，也能获取到图片的后缀名，宽高以及尺寸。有了这些数据，就可以通过接口传值给后台了。具体的接口具体自己向后台要。