laravel在线教育开发__七牛云改写上传方式

在线教育开发之七牛改写上传方式

为了更好地做到代码与资源分离,大部分的公司都会把一些静态文件(js、css、img、视频等等文件)都会放到第三方/单独的服务器上去。

原因:
①在后期维护网站的也比较方便;
②资源分离之后可以减轻代码服务器的压力;
③如果将资源分离和CDN(content delivery network)配合起来用,对于bat之类的大公司来说1年能够省下的成本至少都是7位数以上;

1.前往七牛官网注册,并实名;
2.创建后期需要的对象存储实例

3.下载七牛的代码依赖库

  1. Github地址:https://github.com/zgldh/qiniu-laravel-storage(安装使用步骤里面都含有)
  2. 安装: composer require zgldh/qiniu-laravel-storage
  3. 配置: config/app.php 里面的 providers 数组, 加上一行
    zgldh\QiniuStorage\QiniuFilesystemServiceProvider::class
  4. config/filesystem.php 里面的 disks数组加上:
 'disks' => [
        ... ,
        'qiniu' => [
            'driver'  => 'qiniu',
            'domains' => [
                'default'   => 'xxxxx.com1.z0.glb.clouddn.com', //你的七牛域名
                'https'     => 'dn-yourdomain.qbox.me',         //你的HTTPS域名
                'custom'    => 'static.abc.com',                //Useless 没啥用,请直接使用上面的 default 项
             ],
            'access_key'=> '',  //AccessKey
            'secret_key'=> '',  //SecretKey
            'bucket'    => '',  //Bucket名字
            'notify_url'=> '',  //持久化处理回调地址
            'access'    => 'public'  //空间访问控制 public 或 private
            'hotlink_prevention_key' => 'afc89ff8bd2axxxxxxxxxxxxxxbb', // CDN 时间戳防盗链的 key。 设置为 null 则不启用本功能。
//            'hotlink_prevention_key' => 'cbab68a279xxxxxxxxxxab509a', // 同上,备用
        ],
    ],

效果如下:

在这里插入图片描述
4.对上面的代码进行修改配置七牛

在这里插入图片描述
注意: 密钥需要在 七牛官网 “个人中心”配置;Bucket名字 就是七牛中对象存储的空间名称。

5.使用七牛的SDK改写(新建)已经实现的上传功能

  1. 关闭本地上传,新增七牛上传(两处,下面还有一处)
    在这里插入图片描述
  2. 编辑上传方法
//上传至七牛云
    public function qiniu(Request $request)
    {
        //判断是否有文件上传和判断是否长传成功
        if ($request->hasFile('file') && $request->file('file')->isValid()){
            //重命名
            $filename = sha1(time().$request->file('file')->getClientOriginalName()).'.'.$request->file('file')->getClientOriginalExtension();
            //文件保存移动
            Storage::disk('qiniu')->put($filename,file_get_contents($request->file('file')->path()));

            $msg = [
                'code'  =>  1,
                'msg'   =>  '上传成功',
                'path'   =>   Storage::disk('qiniu')->getDriver()->downloadUrl($filename),
            ];
        }else{
            $msg = [
                'code'  =>  0,
                'msg'  =>  $request->file('file')->getErrorMessage(),
            ];
        }
        return response()->json($msg);
    }
  1. 需要修改的地方有这几处
    在这里插入图片描述

6.效果如下:

在这里插入图片描述

复制路径可以查看图片

在这里插入图片描述
在七牛服务器中也可以看到新添的图片

在这里插入图片描述
至此,上传成功!!

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以回答你的问题。为了在ElementUI的Upload中使用七牛云储存图片,你需要进行以下步骤: 1. 首先,你需要在七牛云上创建一个存储空间,并获取到你的Access Key和Secret Key。 2. 然后,在你的Vue项目中安装七牛云的SDK,可以使用npm命令进行安装: ``` npm install qiniu-js --save ``` 3. 在你的Vue组件中,你需要引入ElementUI的Upload组件,并添加一个自定义的上传方法。这个方法将会在文件上传时被调用: ```javascript <template> <el-upload class="upload-demo" action="/upload" :before-upload="beforeUpload" :on-success="handleSuccess" :on-error="handleError" :headers="headers" :data="data" :file-list="fileList" multiple> <el-button size="small" type="primary">点击上传</el-button> </el-upload> </template> <script> import { Upload } from 'element-ui'; import Qiniu from 'qiniu-js'; export default { components: { Upload }, data() { return { fileList: [], token: '', key: '', domain: 'http://xxx.xxx.xxx.xxx/', headers: { 'Authorization': '', 'x-qiniu-url': '' }, data: { token: '', key: '' } }; }, methods: { beforeUpload(file) { // 获取上传凭证 let that = this; return new Promise((resolve, reject) => { axios.get('YOUR_UPLOAD_URL') .then(response => { that.token = response.data.token; that.key = response.data.key; that.headers.Authorization = `UpToken ${that.token}`; that.headers['x-qiniu-url'] = that.domain; that.data.token = that.token; that.data.key = that.key; resolve(); }) .catch(error => { reject(error); }) }); }, handleSuccess(response, file, fileList) { // 上传成功回调 console.log(response); }, handleError(error, file, fileList) { // 上传失败回调 console.log(error); } } } </script> ``` 在这段代码中,我们引入了ElementUI的Upload组件和七牛云的SDK,然后在data中定义了一些变量,包括上传凭证、上传文件的key、七牛的域名、请求头和请求参数等。在beforeUpload方法中,我们向你的服务器请求上传凭证,在请求成功后将认证信息和请求参数赋值给data和headers变量。在handleSuccess和handleError方法中,我们可以处理上传成功和上传失败的情况。 4. 最后,你需要在你的服务器端实现上传凭证的生成。可以使用七牛云的SDK,也可以使用其他语言的SDK,例如Java或Python。在服务器端生成上传凭证后,将凭证和上传文件的key返回给前端。 例如,在Node.js中,你可以使用qiniu-sdk: ```javascript const qiniu = require('qiniu'); const accessKey = 'YOUR_ACCESS_KEY'; const secretKey = 'YOUR_SECRET_KEY'; const bucket = 'YOUR_BUCKET_NAME'; const mac = new qiniu.auth.digest.Mac(accessKey, secretKey); const options = { scope: bucket, expires: 7200 }; const putPolicy = new qiniu.rs.PutPolicy(options); const uploadToken = putPolicy.uploadToken(mac); app.get('/uploadToken', (req, res) => { const key = req.query.filename; res.json({ token: uploadToken, key: key }); }); ``` 在这个例子中,我们使用qiniu-sdk生成上传凭证,并在/uploadToken路由中返回凭证和上传文件的key。 这样,你就可以在ElementUI的Upload中使用七牛云存储图片了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值