经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JSJS库框架 » JavaScript » 查看文章
xhEditor编辑器上传图片到 OSS
来源:cnblogs  作者:毛寸头少年*  时间:2018/9/27 16:42:47  对本文有异议

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

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

 

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

 

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

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

   

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

 

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

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

 

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

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

  1. var _Client = new OSS.Wrapper({
  2. region: 'oss-cn-shanghai',
  3. accessKeyId: 'xxxxxxxxxxxxxx',
  4. accessKeySecret: 'xxxxxxxxxxxxxxxxxxxxxxxxx',
  5. bucket: 'xxxxxxx'
  6. });

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

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

生成文件夹 文件名

  1. //文件夹 时间戳
  2. function timesymd() {
  3. var time = new Date();
  4. var y = time.getFullYear();
  5. var m = time.getMonth() + 1;
  6. var d = time.getDate();
  7. return "" + y + _Add(m) + _Add(d)
  8. };
  9. //文件名 时间戳
  10. function timestamp() {
  11. var time = new Date();
  12. var y = time.getFullYear();
  13. var m = time.getMonth() + 1;
  14. var d = time.getDate();
  15. var h = time.getHours();
  16. var mm = time.getMinutes();
  17. var s = time.getSeconds();
  18. return "" + y + _Add(m) + _Add(d) + _Add(h) + _Add(mm) + _Add(s);
    };
  19. function _Add(m) { return m < 10 ? '0' + m : m; }

 最后,备注

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

 

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号