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>