html5 dzzxjbd cn,UEditor实现单张图片上传至腾讯云(对象存储服务)功能(html5
UEditor文件上传默认只支持后端语音,因为项目是前后端分离开发,所以需要前端自行实现图片上传。
这里是直接修改的 ueditor/ueditor.all.js文件
ueditor.all.js中找到:
// plugins/simpleupload.js
UE.plugin.register("simpleupload", function (){ ...
【代码中新增三个方法:readImgFile(), toBlobData(), upload()】
// 原代码
domUtils.on(input, "change", function(){
if(!input.value) return;
// 修改为
domUtils.on(input, "change", function(e){ // 传值e
if(!input.value) return;
var file = e.target.files[0]; // 获取文件
// 代码中找到
function callback(){
try{
var link, json, loader,
...
// 修改为
function callback(){
try{
// var link, json, loader,
// body = (iframe.contentDocument || iframe.contentWindow.document).body,
// result = body.innerText || body.textContent || "";
//
// json = (new Function("return " + result))();
// link = me.options.imageUrlPrefix + json.url;
// 读取文件
readImgFile(file, function (data){
// 转码文件,大图等比缩放
toBlobData(data, function (blob) {
// 上传至腾讯云
upload(blob, function(res) {
// 获取上传成功后文件URL
var src = res.data.source_url;
if (src) {
// 腾讯云文件,转为万象优图图片
var url = src.toString().replace(".cos", ".pic") + "?imageView2";
loader = me.document.getElementById(loadingId);
loader.setAttribute("src", url);
loader.setAttribute("_src", url);
loader.setAttribute("title", file.name);
loader.setAttribute("alt", file.name);
loader.removeAttribute("id");
domUtils.removeClasses(loader, "loadingclass");
} else {
showErrorLoader && showErrorLoader(json.state);
}
});
});
});
}catch(er){
showErrorLoader && showErrorLoader(me.getLang("simpleupload.loadError"));
}
本地文件读取方法,html5 FileReader
/**
* 读取本地图片数据
* @param {Object} file 图片文件
* @param {Object} callback 回调图片数据
*/
function readImgFile(file, callback) {
if (typeof FileReader === undefined ) {
alert("您的浏览器不支持FileReader接口!
请升级或更换高版本浏览器!");
return false;
}
var reader = new FileReader();
//将文件以Data URL形式读入页面
reader.readAsDataURL(file);
reader.onload = function (e) {
callback(e.target.result);
}
};
利用canvas等比缩小大图,并再次转换数据格式
/**
* 大图缩小,数据格式二次转换blob
* @param {Object} urlData 图片url数据
* @param {Object} callback 图片blob数据
*/
function toBlobData (urlData, callback) {
// 创建图片
var image = new Image();
image.src = urlData;
// 原始图片尺寸
var iw = image.width,
ih = image.height;
// canvas尺寸
var cw, ch;
// 将width > 640 的图片进行压缩
if (iw > 640) {
cw = 640;
ch = Math.ceil(cw*(ih/iw));
}
console.log(iw + "+" + ih);
console.log(cw + "+" + ch);
// 生成裁剪后图片
var canvas = document.createElement("canvas");
canvas.width = cw;
canvas.height = ch;
ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, iw, ih, 0, 0, cw, ch);
// 获取 canvas 中图片的信息,用 toDataURL 就可以转换成上面用到的 DataURL 。
// 然后取出其中 base64 信息,再用 window.atob 转换成由二进制字符串。
// 但 window.atob 转换后的结果仍然是字符串,直接给 Blob 还是会出错。
// 所以又要用 Uint8Array 转换一下。
var data = canvas.toDataURL("image/jpeg");
// dataURL 的格式为 “data:image/png;base64,****”,
// 逗号之前都是一些说明性的文字,我们只需要逗号之后的就行了
data = data.split(",")[1];
data = window.atob(data);
var ia = new Uint8Array(data.length);
for (var i = 0; i < data.length; i++) {
ia[i] = data.charCodeAt(i);
};
// canvas.toDataURL 返回的默认格式就是 image/jpeg
var blob = new Blob([ia], {type:"image/jpeg"});
callback(blob);
};
腾讯云文件上传
// 腾讯云上传方法
function upload(data, callback) {
var now = new Date();
var region = "gz";
var successCallBack = function (result) {
console.log(" upload success...")
console.log(result)
callback(result);
};
var errorCallBack = function (result) {
result = result || {};
console.log(" upload error...")
console.log(result.responseText || "error");
};
var progressCallBack = function (curr) {
console.log(" uploading... curr progress is " + curr)
};
// 文件上传签名
// 这个需要自己配置
// 详见腾讯云Api文档
var signData = {
"filesign": "lWlcFgkK6j5Uql5FAbLbv/DdvalhPTEyNTMxNTAxOTMmaz1BS0lEZ01JRTBkQ2N5THBEUE90YnMzMnBUMExjbDVEREdxU3cmZT0xNDg5MDc1MjAwJnQ9MTQ4OTA0MjI5OCZyPTgzMzgzMTg3MCZmPSZiPXhtcXZpcA==",
"appid": "11111111",
"bucket": "仓库名称",
"filedir": "file/2017/03/09/"
}
var sign = encodeURIComponent(signData.filesign),
appid = signData.appid,
bucket = signData.bucket,
folder = signData.filedir;
var cos = new CosCloud({
appid: appid, // APPID 必填参数
bucket: bucket, // bucketName 必填参数
region: region, // 地域信息 必填参数 华南地区填gz 华东填sh 华北填tj
getAppSign: function (callback) {
callback(sign);
},
getAppSignOnce: function (callback) {
callback(sign);
}
});
var file = data;
// 文件名
var saveFile = new Date().getTime() + ".jpg";
cos.uploadFile(successCallBack, errorCallBack, progressCallBack, bucket, folder + saveFile, file, 1);
//insertOnly==0 表示允许覆盖文件 1表示不允许
}
上传至腾讯云,需要引入js文件:
html5 dzzxjbd cn,UEditor实现单张图片上传至腾讯云(对象存储服务)功能(html5相关推荐
- 使用node上传到腾讯云对象存储cos---转载
虽然是2017年发布的,但今天依然很好用感谢作者 原作者地址 遇到的小坑: MulterError: Unexpected fieldat wrappedFileFilter (C:\Users\Ad ...
- Java导出Excel文档(poi),并上传到腾讯云对象存储服务器
需求 后台生成周报月报季报年报Excel,将文件下载链接推送给对应客户 开发思路: 1.根据选定日期生成周报,月报,季报,年报数据 2.将这些数据报告生成Excel表格 3.把生成的文件上传到腾讯云对 ...
- 图片上传到腾讯云COS小案例
一.安装扩展包 composer require "overtrue/laravel-filesystem-cos" 二. 修改配置文件 config/filesystems.ph ...
- 微信小程序视频图片上传到腾讯云COS对象储存
配置好腾讯云账号 下载对应SDK引入使用,这里提供实践代码. let COS = require('./utils/cos-wx-sdk-v5'); //签名生成配置数,可自行生成,或者后台处理好给你 ...
- JavaSDK上传文件到阿里云对象存储oss
1.引入阿里云SDK的maven依赖 <!-- 阿里云sdk--><dependency><groupId>com.aliyun.oss</groupId&g ...
- 腾讯云对象存储的完整教程,java将文件上传到腾讯云上后返回可以访问的连接
先前使用的是七牛云,是挺好用的,但是七牛对于测试域名有一个月的时间限制.测试域名失效后上传的图片等文件就不能访问了.但是腾讯云每个注册的账户有50G的对象存储的空间.而且没有时间限制.所以就采用腾讯的 ...
- 轻松实现微信小程序上传多文件/图片到腾讯云对象存储COS(免费额度)
概述 对象存储(Cloud Object Storage,COS)是腾讯云提供的一种存储海量文件的分布式存储服务,用户可通过网络随时存储和查看数据. 个人账户首次开通COS可以免费领取50GB 标准存 ...
- 单张图片上传预览【超简洁,未完待续】
http://www.cnblogs.com/ordinaryk/p/6277451.html 1.单张图片上传之前前端预览 <!DOCTYPE html PUBLIC "-//W3C ...
- Bootstrap框架----单张图片上传实现---Uploadify插件
框架搭建 我们在之前的文章中已经实现了 单张图片的上传,使用的是最基本的 File类型的input提交的方式,上传到远程静态资源器和七牛云. 之前的文章关注的地方 主要是后端,也就是图片上传保存到哪里 ...
最新文章
- linux下,MySQL默认的数据文档存储目录为/var/lib/mysql。
- cocos2d-x游戏实例(13)-简易摇杆控制主角
- 写一个脚本,判断下如果是阴历7月7日,在服务器上广播“七夕情人节快乐!”...
- [BZOJ] 1610: [Usaco2008 Feb]Line连线游戏
- WebLogic如何设置session超时时间
- 控制Arduino的利器-Windows Remote Arduino
- MySQL索引优化的几种方式
- 网络“投毒”系列报告:全国多省软件升级劫持攻击事件数据分析
- Win10怎么查找产品密钥? Win10产品密钥的3种查找方法
- 计算hashCode通用计算公式
- 【Web前端】HTML—6.表单标签
- sap外币重估流程图_SAP外币评估配置及操作OK
- Android Studio 连接夜神模拟器的方法
- netflix自动续费关闭_如何禁用Netflix的自动播放预览
- echart 三维可视化地图_可视化地图是什么?推荐3个工具!
- 成都速领科技:店铺数据要看哪些
- 微信公众号商城是否需要云服务器,云商城公众号绑定、微信支付配置文档
- Python表情包处理教程:如何过滤和替换emoji表情?
- 2022R2移动式压力容器充装考试模拟100题及答案
- win10怎么下载python_w10怎么下载安装python|w10下载安装python的方法
热门文章
- 超高薪的机器学习工程师和现在的前后端们有什么不同?
- 华为举办HDC.Cloud媒体预沟通会,为开发者提供ICT“黑土地”
- 高效编排有状态应用——TiDB 的云原生实践与思考
- 你知道该如何搭建 AI 智能问答系统吗?
- 微信小程序发力搜索,开发者变现难,揭秘小程序行业真实现状
- Google 产品的消亡史!
- 微软将终止支持 Win7;今日头条不与微信竞争;诺基亚芬兰裁员 | 极客头条
- 被裁员 60%,以太坊大神忍不住要洗白了
- 今日头条收购锤子?ofo 半月退 24 万户押金;斗鱼索赔主播 1.5 亿元 | 极客头条...
- 编程语言 Ruby 如何还能再活 25 年?