vue使用sdk进行七牛云上传

Erin 2021-02-23 14:44:53
vue sdk 使用 进行 上传


1. 七牛地址javascript-sdk官方地址:https://developer.qiniu.com/kodo/sdk/1283/javascript
2. github中七牛sdk上传参考代码:https://github.com/qiniu/js-sdk
3. 上传过20M的相机高清图片,需要在图片后面添加后缀: +?'<span class="colour" style="color: rgb(137, 202, 120);">imageslim/3/h/136',</span>
<span class="colour" style="color: rgb(137, 202, 120);">这是图片处理的方法:</span>
<span class="colour" style="color: rgb(137, 202, 120);">https://developer.qiniu.com/dora/manual/1279/basic-processing-images-imageview2</span>

<span class="colour" style="color: rgb(0, 0, 0);">备注:七牛上传使用七牛sdk,图片展示时候被vue框架会自动压缩,上传成功后resolve()会返回两个参数:</span>hash、key, 使用返回的key字段与后台返回的七牛域名进行拼接,这就组成了新的图片地址,但是返回的key是没有类似 .jpg 后缀的,所以需要在上传前给 七牛sdk的key换成自己的标识

<span class="colour" style="color: rgb(55, 71, 79);">在Node安装运行七牛的包 npm</span> <span class="colour" style="color: rgb(55, 71, 79);">install qiniu-js</span>

4.具体代码参考七牛上传(如下):
<span class="colour" style="color: rgb(198, 120, 221);">function</span><span class="colour" style="color: rgb(171, 178, 191);"> </span><span class="colour" style="color: rgb(97, 175, 239);">guid</span><span class="colour" style="color: rgb(171, 178, 191);"> (</span><span class="colour" style="color: rgb(224, 108, 117);">uuid</span><span class="colour" style="color: rgb(171, 178, 191);">) {</span>
<span class="colour" style="color: rgb(171, 178, 191);">  </span><span class="colour" style="color: rgb(198, 120, 221);">return</span><span class="colour" style="color: rgb(171, 178, 191);"> </span><span class="colour" style="color: rgb(152, 195, 121);">'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'</span><span class="colour" style="color: rgb(171, 178, 191);">.</span><span class="colour" style="color: rgb(97, 175, 239);">replace</span><span class="colour" style="color: rgb(171, 178, 191);">(</span><span class="colour" style="color: rgb(152, 195, 121);">/</span><span class="colour" style="color: rgb(209, 154, 102);">[xy]</span><span class="colour" style="color: rgb(152, 195, 121);">/</span><span class="colour" style="color: rgb(198, 120, 221);">g</span><span class="colour" style="color: rgb(171, 178, 191);">,</span>
<span class="colour" style="color: rgb(171, 178, 191);">  </span><span class="colour" style="color: rgb(198, 120, 221);">function</span><span class="colour" style="color: rgb(171, 178, 191);"> (</span><span class="colour" style="color: rgb(224, 108, 117);">c</span><span class="colour" style="color: rgb(171, 178, 191);">) {</span>
<span class="colour" style="color: rgb(171, 178, 191);">    </span><span class="colour" style="color: rgb(198, 120, 221);">var</span><span class="colour" style="color: rgb(171, 178, 191);"> </span><span class="colour" style="color: rgb(224, 108, 117);">r</span><span class="colour" style="color: rgb(171, 178, 191);"> </span><span class="colour" style="color: rgb(86, 182, 194);">=</span><span class="colour" style="color: rgb(171, 178, 191);"> </span><span class="colour" style="color: rgb(229, 192, 123);">Math</span><span class="colour" style="color: rgb(171, 178, 191);">.</span><span class="colour" style="color: rgb(97, 175, 239);">random</span><span class="colour" style="color: rgb(171, 178, 191);">() </span><span class="colour" style="color: rgb(86, 182, 194);">*</span><span class="colour" style="color: rgb(171, 178, 191);"> </span><span class="colour" style="color: rgb(209, 154, 102);">16</span><span class="colour" style="color: rgb(171, 178, 191);"> </span><span class="colour" style="color: rgb(86, 182, 194);">|</span><span class="colour" style="color: rgb(171, 178, 191);"> </span><span class="colour" style="color: rgb(209, 154, 102);">0</span><span class="colour" style="color: rgb(171, 178, 191);">, </span><span class="colour" style="color: rgb(224, 108, 117);">v</span><span class="colour" style="color: rgb(171, 178, 191);"> </span><span class="colour" style="color: rgb(86, 182, 194);">=</span><span class="colour" style="color: rgb(171, 178, 191);"> </span><span class="colour" style="color: rgb(224, 108, 117);">c</span><span class="colour" style="color: rgb(171, 178, 191);"> </span><span class="colour" style="color: rgb(86, 182, 194);">==</span><span class="colour" style="color: rgb(171, 178, 191);"> </span><span class="colour" style="color: rgb(152, 195, 121);">'x'</span><span class="colour" style="color: rgb(171, 178, 191);"> </span><span class="colour" style="color: rgb(198, 120, 221);">?</span><span class="colour" style="color: rgb(171, 178, 191);"> </span><span class="colour" style="color: rgb(224, 108, 117);">r</span><span class="colour" style="color: rgb(171, 178, 191);"> </span><span class="colour" style="color: rgb(198, 120, 221);">:</span><span class="colour" style="color: rgb(171, 178, 191);"> (</span><span class="colour" style="color: rgb(224, 108, 117);">r</span><span class="colour" style="color: rgb(171, 178, 191);"> </span><span class="colour" style="color: rgb(86, 182, 194);">&</span><span class="colour" style="color: rgb(171, 178, 191);"> </span><span class="colour" style="color: rgb(209, 154, 102);">0x3</span><span class="colour" style="color: rgb(171, 178, 191);"> </span><span class="colour" style="color: rgb(86, 182, 194);">|</span><span class="colour" style="color: rgb(171, 178, 191);"> </span><span class="colour" style="color: rgb(209, 154, 102);">0x8</span><span class="colour" style="color: rgb(171, 178, 191);">);</span>
<span class="colour" style="color: rgb(171, 178, 191);">    </span><span class="colour" style="color: rgb(198, 120, 221);">return</span><span class="colour" style="color: rgb(171, 178, 191);"> </span><span class="colour" style="color: rgb(224, 108, 117);">v</span><span class="colour" style="color: rgb(171, 178, 191);">.</span><span class="colour" style="color: rgb(97, 175, 239);">toString</span><span class="colour" style="color: rgb(171, 178, 191);">(</span><span class="colour" style="color: rgb(209, 154, 102);">16</span><span class="colour" style="color: rgb(171, 178, 191);">);</span>
<span class="colour" style="color: rgb(171, 178, 191);">  }) </span><span class="colour" style="color: rgb(86, 182, 194);">+</span><span class="colour" style="color: rgb(171, 178, 191);"> </span><span class="colour" style="color: rgb(224, 108, 117);">uuid</span><span class="colour" style="color: rgb(171, 178, 191);">;</span>
<span class="colour" style="color: rgb(171, 178, 191);">}</span>

<span class="colour" style="color: rgb(0, 0, 0);">由于第一张图片太小,放第二张代码清晰的进行对比</span>
78587873eccdfa26ef7a77a0ae5755e.png
096ab68a5a083dec39cbea4abd52f03.png

版权声明
本文为[Erin]所创,转载请带上原文链接,感谢
https://segmentfault.com/a/1190000039261293

  1. Golang 实现 Redis(9): 使用GeoHash 搜索附近的人
  2. RxHttp - 轻量级、可扩展、易使用、完美兼容MVVM、MVC架构的网络封装类库
  3. Golang realizes redis (9): using geohash to search nearby people
  4. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  5. Golang realizes redis (9): using geohash to search nearby people
  6. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  7. 读懂框架设计的灵魂 — Java 反射机制
  8. 治疗磁盘空间不足焦虑症,释放容器占用空间——Win10+docker篇
  9. 别再用jodatime了!全网最权威Java8日期时间类LocalDate、LocalDateTime详解
  10. Understanding the soul of framework design java reflection mechanism
  11. 配置客户端以安全连接到Apache Kafka集群4:TLS客户端身份验证
  12. Treating anxiety of insufficient disk space and releasing space occupied by containers -- win10 + docker
  13. Don't use jodatime any more! The most authoritative java 8 date and time classes in the whole network: detailed explanation of localdate and localdatetime
  14. Configure clients to connect securely to Apache Kafka Cluster 4: TLS client authentication
  15. Spring break
  16. 高性能MySQL(三):Schema与数据类型优化
  17. High performance mysql (3): schema and data type optimization
  18. redis解决缓存、击穿、雪崩
  19. redis
  20. 骑士卡:基于Kafka搭建消息中心,上亿消息推送轻松完成
  21. Redis solves cache, breakdown and avalanche
  22. redis
  23. Knight card: build a message center based on Kafka, and push hundreds of millions of messages easily
  24. Oracle OCP 19c 认证1Z0-083考试题库(第2题)
  25. redis的三种模式
  26. kubernetes和docker----2.学习Pod资源
  27. 谈一谈如何远程访问MySQL(腾讯云,云主机)
  28. Linux(五):Linux的文档编辑器Vi
  29. Oracle OCP 19C certification 1z0-083 examination question bank (question 2)
  30. 云原生项目实践DevOps(GitOps)+K8S+BPF+SRE,从0到1使用Golang开发生产级麻将游戏服务器—第6篇
  31. kubernetes和docker----2.学习Pod资源
  32. JSP基于Java开发Web应用程序特点有哪些?
  33. Three modes of redis
  34. Kubernetes and docker -- 2. Learning pod resources
  35. Linux (5): the document editor VI of Linux
  36. Cloud native project practice Devops (gitops) + k8s + BPF + SRE, using golang to develop production level mahjong game server from 0 to 1
  37. Kubernetes and docker -- 2. Learning pod resources
  38. What are the characteristics of JSP developing web application based on Java?
  39. Lottie error: java.lang.AssertionError : android.util.JsonReader .peek
  40. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  41. docker入门到熟练
  42. Java之HTTP网络编程(一):TCP/SSL网页下载
  43. Introduction to docker
  44. HTTP network programming in Java (1): TCP / SSL web page download
  45. mysql 的ACID以及隔离级别
  46. Acid and isolation level of MySQL
  47. Java序列化对字段名的影响
  48. The influence of Java serialization on field names
  49. Redis 日志篇:系统高可用的杀手锏
  50. Java中把一个对象复制给另外一个对象引发的思考
  51. Java之HTTP网络编程(一):TCP/SSL网页下载
  52. Redis log: the killer of system high availability
  53. Thinking about copying one object to another in Java
  54. HTTP network programming in Java (1): TCP / SSL web page download
  55. 数据库--oracle安装配置(本地安装的步骤及各种问题解决方案)
  56. 从事Java9年,27天熬夜把近年遇到的面试题收录成册全网开源!
  57. Database -- Oracle installation configuration (local installation steps and various problem solutions)
  58. Engaged in Java for 9 years, 27 days stay up late, the interview questions encountered in recent years included into a volume, the whole network open source!
  59. Java序列化 / 调用 Wildfly 服务接口异常:EJBCLIENT000409
  60. docker-compose部署Estack