上传文件到七牛云

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

代码

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-z2.qiniu.com", // 七牛云的上传地址（华南区）qiniuaddr: "https://??????.com/", // 七牛云的图片外链地址 你的七牛云里配置有uploadPicUrl: "", //提交到后台图片地址fileList: [],nowTime:'',fileExtension:''
}

在这之前，我们需要一个token,token可以是向后台要，也可以自己生成。这里讲一下自己生成。
首先需要import一个文件，这个JS文件我直接给出了，不是我写的，注释里有copyright

/*** 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:// 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官方文档 https://element.eleme.cn/#/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这就是后缀，也能获取到图片的后缀名，宽高以及尺寸。有了这些数据，就可以通过接口传值给后台了。具体的接口具体自己向后台要。

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

elementui 上传七牛_用element ui上传图片到七牛踩过的坑
前端上传图片到七牛云的流程请求后端接口获取上传凭证请求七牛云地址上传图片到七牛云上传完毕将获得七牛云返回的图片地址七牛云地址说到七牛云地址,奴家真的是一把鼻涕一把泪刚开始做图片上传的时候, ...
vue element ui 上传图片压缩
1:将压缩js封装起来 /** 图片压缩,默认同比例压缩* @param {Object} fileObj* 图片对象* 回调函数有一个参数,base64的字符串数据*/export functi ...
Vue+element ui上传图片和视频并回显，点击放大查看和播放
1.上传图片 html代码: <el-uploadaction="#":auto-upload="false":on-change="handl ...
web前端-Vue element UI中的el-table勾选框展示隐藏；设置默认勾选、禁用
1.el-table如果我们想新增一个勾选框,在 .vue文件中 <el-table-column type="selection" width="55" ...
web前端-vue element UI el-table，el-table-column表格添加行点击事件
el-table如下数据一.el-table 整行都可以点击事件定义点击事件 @row-click="openDetails":openDetails为方法名 <!-- ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
文章目录前言项目文件目录 api mockServe home.js permission.js index.js mock.js user.js assert components Common ...

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

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

上传文件到七牛云

代码

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

最新文章

热门文章