脚本宝典收集整理的这篇文章主要介绍了

Web端文件上传至阿里云OSS(基于Angular 5项目)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h1 id="articleHeader0">一、准备工作</h1> <p><strong>1. 开通阿里云OSS服务,从控制台上获取AccessKeyId和AccessKeySecret。</strong></p> <p><strong>2. 创建Bucket,并登录OSS控制台</strong></p> <p><strong>3. 配置Bucket</strong></p> <ul> <li>将allowed origins(来源)设置成 *</li> <li>将allowed methods(允许methods)设置成 PUT, GET, POST, DELETE, HEAD</li> <li>将allowed headers(允许headers)设置成 *</li> <li>将expose headers(暴露headers)设置成 etag x-oss-request-id</li> </ul> <p><span class="img-wrap"><img data-src="/img/remote/1460000017350738" src="https://cdn.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="Bucket配置图" title="Bucket配置图" style="cursor: pointer;"></span><br />可参考阿里官方文档:<a href="https://help.aliyun.com/document_detail/32069.html?spm=a2c4g.11186623.6.989.26a459662WQfhJ" rel="nofollow noreferrer" target="_blank">https://help.aliyun.com/docum...</a></p> <h1 id="articleHeader1">二、引入ali-oss</h1> <p>有两种方式:</p> <p><strong>1. 在<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>文件的<code>&lt;head&gt;</code>中包含如下标签:</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script src=&quot;http://gosspublic.alicdn.com/aliyun-oss-sdk-6.0.1.min.js&quot;></script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code style="word-break: break-word; white-space: initial;"><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"http://gosspublic.alicdn.com/aliyun-oss-sdk-6.0.1.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p><strong>2. 项目中安装ali-oss</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" npm install ali-oss --save" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code> npm <span class="hljs-keyword">install</span> <span class="hljs-keyword">ali</span>-oss <span class="hljs-comment">--save</span></code></pre> <p>可参考阿里官方文档:<a href="https://github.com/ali-sdk/ali-oss" rel="nofollow noreferrer" target="_blank">https://github.com/ali-sdk/al...</a></p> <p>这里使用第二种。</p> <h1 id="articleHeader2">三、使用OSS</h1> <blockquote> <p>关于直传,阿里官方给了三种方案:</p> <ol> <li>客户端 JavaScript 签名后直传;</li> <li>客户端申请服务端签名,然后打包上传;</li> <li>客户端申请服务端签名,打包上传OSS后回调服务端。</li> </ol> </blockquote> <p>这里使用第一种。</p> <p><strong>1. aliUploadDemo.component.html,使用input元素选择文件</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<input type=&quot;file&quot; [(ngModel)]=&quot;fileVal&quot; (change)=&quot;fileEvent($event)&quot;><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code>&lt;input <span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"file"</span> [(ngModel)]=<span class="hljs-string">"fileVal"</span> (change)=<span class="hljs-string">"fileEvent($event)"</span>&gt; </code></pre> <p><strong>2. aliUploadDemo.component.ts</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// 导入 ali-oss import * as OSS from 'ali-oss' ... export class AliUploadDemo{ client; this.client = new OSS({ accessKeyId: 'your access key', accessKeySecret: 'your access secret', bucket: 'your bucket name', region: 'oss-cn-hongkong' }); // 获取文件 fileEvent(fileInput: any) { const file = fileInput.target.files[0] // 获取文件资源 const reader = new FileReader() if (file) reader.readAsDataURL(file) // 读取文件 this.uploadFile(file); // 调用上传方法 fileInput.target.value = '' // 重置以便下次可上传同个文件(以通过change检测) } /* 上传文件至阿里云OSS * 官方解释:通过new OSS来创建client,创建后返回的是Promise, * 类似于callback的方式,在.then()中处理返回的结果,在.catch()中处理错误。 */ uploadFile(file){ this.client.put(aliName, file.fileVal).catch((err) => {<br /> if (err) {<br /> console.log(err);<br /> return;<br /> }<br /> }).then((result) => {<br /> console.log(result);<br /> }</p> <p>}<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-comment">// 导入 ali-oss</span> <span class="hljs-keyword">import</span> * <span class="hljs-keyword">as</span> OSS <span class="hljs-keyword">from</span> <span class="hljs-string">'ali-oss'</span> ... <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">class</span> AliUploadDemo{ client; <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.client = <span class="hljs-keyword">new</span> OSS({ accessKeyId: <span class="hljs-string">'your access key'</span>, accessKeySecret: <span class="hljs-string">'your access secret'</span>, bucket: <span class="hljs-string">'your bucket name'</span>, region: <span class="hljs-string">'oss-cn-hongkong'</span> }); <span class="hljs-comment">// 获取文件</span> fileEvent(fileInput: <span class="hljs-built_in">any</span>) { <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a></span> file = fileInput.target.files[<span class="hljs-number">0</span>] <span class="hljs-comment">// 获取文件资源</span> <span class="hljs-keyword">const</span> reader = <span class="hljs-keyword">new</span> FileReader() <span class="hljs-keyword">if</span> (file) reader.readAsDataURL(file) <span class="hljs-comment">// 读取文件</span> <span class="hljs-keyword">this</span>.uploadFile(file); <span class="hljs-comment">// 调用上传方法</span> fileInput.target.value = <span class="hljs-string">''</span> <span class="hljs-comment">// 重置以便下次可上传同个文件(以通过change检测)</span> } <span class="hljs-comment">/* 上传文件至阿里云OSS * 官方解释:通过new OSS来创建client,创建后返回的是<a href="http://www.js-code.com/tag/promise" title="浏览关于“Promise”的文章" target="_blank" class="tag_link">Promise</a>, * 类似于callback的方式,在.then()中处理返回的结果,在.catch()中处理错误。 */</span> uploadFile(file){ <span class="hljs-keyword">this</span>.client.put(aliName, file.fileVal).catch(<span class="hljs-function">(<span class="hljs-params">err</span>) =&gt;</span> { <span class="hljs-keyword">if</span> (err) { <span class="hljs-built_in">console</span>.log(err); <span class="hljs-keyword">return</span>; } }).then(<span class="hljs-function">(<span class="hljs-params">result</span>) =&gt;</span> { <span class="hljs-built_in">console</span>.log(result); } } </code></pre> <p>至此,上传操作已完成啦。可通过查看你的Bucket,或者通过返回的result,来确定上传成功与否。</p> <p>【参考资料】</p> <ol> <li><a href="https://help.aliyun.com/document_detail/31883.html?spm=a2c4g.11186623.6.559.566320besDFHVU" rel="nofollow noreferrer" target="_blank">阿里云官方文档:开始使用oss</a></li> <li><a href="https://help.aliyun.com/document_detail/32069.html?spm=a2c4g.11186623.6.989.26a459662WQfhJ" rel="nofollow noreferrer" target="_blank">阿里云官方文档:介绍如何在BrowserJS-SDK中快速使用访问OSS服务</a></li> <li><a href="https://segmentfault.com/a/1190000008352305">微信公众号图片上传至阿里云OSS</a></li> <li><a href="https://segmentfault.com/a/1190000006718963#articleHeader3" target="_blank">前端图片直传OSS试验</a></li> <li><a href="http://www.voidcn.com/article/p-bclqtaug-brb.html" rel="nofollow noreferrer" target="_blank">如何基于OSS和MTS,快速搭建音视频文件上传服务?</a></li> </ol> <p><strong>声明:转发请注明出处,谢谢~</strong></p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

Web端文件上传至阿里云OSS(基于Angular 5项目)

全部内容,希望文章能够帮你解决

Web端文件上传至阿里云OSS(基于Angular 5项目)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过