文件上传(使用七牛云对象存储)

使用七牛云对象存储进行文件上传

一、为什么不将文件存到应用服务器?

因为存在应用服务器中,文件会比普通JSON数据大,每一次读取都要从应用服务器中读取文件,会消耗更多的时间和带宽,那么应用服务器响应时长会增长。在实际开发过程中,我们都会对单独对文件进行部署。

二、七牛云基本使用

地址:https://www.qiniu.com/
需要进行认证。
认证后进入控制台 -> 对象存储 -> 空间管理
新建一个空间
在这里插入图片描述

记住你的空间名

进入密钥管理 复制你的 AKSK
在这里插入图片描述

  • 8
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
要实现前端上传文件给七牛云,首先需要获取上传凭证。凭证可以在后端生成,前端可以通过 AJAX 请求获取。获取凭证后,可以使用七牛云JavaScript SDK 进行上传操作,具体步骤如下: 1. 引入七牛云 JavaScript SDK 在 HTML 文件中引入七牛云 JavaScript SDK 的链接: ``` <script src="https://cdn.staticfile.org/qiniu-js/1.0.18-beta/qiniu.min.js"></script> ``` 2. 初始化七牛云上传对象 ``` var uploader = Qiniu.uploader({ runtimes: 'html5', // 上传方式,可选项:html5, flash, html4 browse_button: '选择文件', // 上传按钮所在的容器,可选项:指定一个按钮元素id,或者直接传入一个HTML元素 container: '上传容器', // 上传区域DOM ID,默认是 browser_button 的父元素 uptoken: '从后台获取的上传凭证', // 上传凭证 domain: '你的七牛云存储空间域名', // 存储空间域名 get_new_uptoken: false, // 是否每次上传都要从后台获取新的上传凭证 max_file_size: '100mb', // 最大上传文件大小 flash_swf_url: '引入flash的地址', // flash上传时需要引入的SWF文件,可选项 dragdrop: true, // 是否开启拖拽上传,可选项 drop_element: '拖拽上传的容器', // 拖拽上传区域DOM ID,可选项 chunk_size: '4mb', // 分块上传时,每片的文件大小 auto_start: true, // 是否自动上传 init: { 'FilesAdded': function(up, files) { // 文件添加后,处理相关逻辑 }, 'BeforeUpload': function(up, file) { // 文件上传前,处理相关逻辑 }, 'UploadProgress': function(up, file) { // 文件上传中,处理相关逻辑 }, 'FileUploaded': function(up, file, info) { // 文件上传成功,处理相关逻辑 }, 'Error': function(up, err, errTip) { // 文件上传失败,处理相关逻辑 }, 'UploadComplete': function() { // 所有文件上传完成后,处理相关逻辑 } } }); ``` 其中,`uptoken` 参数是从后端获取的上传凭证,`domain` 参数是你的七牛云存储空间域名。 3. 处理相关事件 在 `init` 中处理相关事件,如添加文件后的逻辑、文件上传前的逻辑、文件上传中的逻辑、文件上传成功的逻辑、文件上传失败的逻辑以及所有文件上传结束后的逻辑。 以上就是前端上传文件给七牛云的实现步骤。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mae_strive

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值