分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

xhEditor编辑器上传图片到 OSS

发布时间:2023-09-06 02:16责任编辑:熊小新关键词:上传图片

      前段时间,公司在项目上用到了xhEditor编辑器来给用户做一个上传图片的功能当时做的时候觉得很有意思,想想 基本的用户图片上传到自己服务器,还有点小占地方;

后来....然后直接上传到阿里云 。接下来就是基本操作:

 

首先,引入官方提供的js库

xhEditor插件下载官网:https://xheditor.com ;OSS~库引入直接复制以下即可:

 ???<!-- oss 上传文件 JavaScript 库 --> ?????<script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.4.4.min.js"></script>

   

其次,进入xhEditor官方提供的js库里面

注:因我当时看的是xhEditor压缩过后,所以看起来很不方便,所以在此表明黄色标注为:全局可搜索 。红色标注为:自定义属性 。 

var i = e(‘<span class="xheUpload"> ???i.append(‘<input type="file"‘ + (1 < p ? ‘ multiple=""‘ : "") + ‘ class="xheFile" size="13" id="UpOss" ?name="filedata" tabindex="-1" />‘);var h = e(".xheFile", i); h.change(function () {

接下来,在上面段落的Change事件中开始表演

第一步:声明自己的accessKeyId 和 accessKeySecret  这需要到阿里云里面去设置

 ?var _Client = new OSS.Wrapper({ ???????region: ‘oss-cn-shanghai‘, ?????????????????????????????????????accessKeyId: ‘xxxxxxxxxxxxxx‘, ?????????????????????????????????accessKeySecret: ‘xxxxxxxxxxxxxxxxxxxxxxxxx‘, ??????????????????bucket: ‘xxxxxxx‘ ??????}); ?????????

第二步:紧接上面,文件上传

 ??var _File = document.getElementById("UpOss").files[0]; ??// 获取文件流 ??var _Val = document.getElementById("UpOss").value; ?????????var suffix = _Val.substr(_Val.indexOf(".")), ????????????// 文件名后缀名 ???????????????????????????????????????obj = timestamp(), ????//文件名 也就是时间戳 ????ymd = timesymd(); ?????//自定义文件夹 ??var stAs = ymd + "/" + obj + suffix; ????//上传到阿里云的文件地址 ?????????????_Client.multipartUpload(stAs, _File).then(function (result) { ??????????console.log(result); ??????//返回对象 ??????????console.log(result.url); ??//返回链接 ???????????????????????????????a.val(result.url); ??//赋值 ????????????????????????????????}).catch(function (err) { ???????????????console.log(err); ?// 返回异常 ???????????});

生成文件夹 文件名

//文件夹 时间戳 function timesymd() { ????var time = new Date(); ???var y = time.getFullYear(); ????var m = time.getMonth() + 1; ???var d = time.getDate(); ????return "" + y + _Add(m) + _Add(d) ????}; //文件名 ?时间戳 ?function timestamp() { ???var time = new Date(); ???var y = time.getFullYear(); ???var m = time.getMonth() + 1; ???var d = time.getDate(); ????var h = time.getHours(); ???var mm = time.getMinutes(); ???var s = time.getSeconds(); ????return "" + y + _Add(m) + _Add(d) + _Add(h) + _Add(mm) + _Add(s);
???}; ?function _Add(m) { return m < 10 ? ‘0‘ + m : m; }

 最后,备注

 注:   此方法上传图片需要去阿里云配置上传权限

xhEditor编辑器上传图片到 OSS

原文地址:https://www.cnblogs.com/pingtouge/p/9712873.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved