laravel+vue+element 图片上传至七牛云

1、使用element-UI上传组件

      <el-upload
        :action="domain" //上传的地址
        :before-upload="beforeUpload" //上传文件之前的执行的函数
        :auto-upload="true" //是否在选取文件后立即进行上传
        accept="image/jpeg,image/gif,image/png"  //允许上传的类型
        :http-request="upqiniu" //覆盖默认的上传行为,可以自定义上传的实现
        :on-remove="moveimg" //文件列表移除文件时的钩子
      >
      </el-upload>
  data() {
    return {
      blog: {
        content: "",    
        user_id: "",
        article_img: []
      },
      domain: "http://upload.qiniup.com",
      qiniuaddr: "qiniuyun.xxxxx.cn", // 七牛云的图片外链地址
    };
  },

具体参数配置可参考:https://element.eleme.cn/#/zh-CN/component/upload

2、js部分

    // 上传图片到七牛云
    upqiniu (req) {
      // 登录后上传
      if(localStorage.getItem("USER_ID")){ 
        const config = {
          headers: {'Content-Type': 'multipart/form-data'}
        }
        let filetype = ''
        if (req.file.type === 'image/png') {
          filetype = 'png'
        } else {
          filetype = 'jpg'
        }
        // 重命名要上传的文件
        const keyname = 'tour' + new Date() + Math.floor(Math.random() * 100) + '.' + filetype
        // 从后端获取上传凭证token
        this.axios.get('/token').then(res => {
          const formdata = new FormData()
          formdata.append('file', req.file)
          formdata.append('token', res.data.data)
          formdata.append('key', keyname)
          // 获取到凭证之后再将文件上传到七牛云空间
          this.axios.post(this.domain, formdata,config).then(res => {
            this.blog.article_img.push('http://' + this.qiniuaddr + '/' + res.data.key);
            // 'http://' + this.qiniuaddr + '/' + res.data.key 就是图片上传后的地址
          }).catch(error=>{
            console.log(error)
          })
        })
      }
    },

3、后台部分

    use Qiniu\Storage\UploadManager;  
    use Qiniu\Auth;
    //别忘了引入
    
    // 图片上传token
    public function gettoken(){
        $accessKey = 'MTdzBcP66AhXwzryjufKzf2nDT2gOjrft0wYZc9FwXYW';   // 访问KEY
        $secretKey = '_PZctlny0U_TfoAWsdfar-av-a8L3ma03W9gMZmgkxz';   // 密钥KEY
        $domain = 'qiniuyun.xxxxx.cn';       // 访问域名
        // 配置参数
        $bucketName = 'tour-app';   // 创建的 bucket(新建的存储空间的名字)

        $upManager = new UploadManager();

        // 登录获取令牌
        $auth = new Auth($accessKey, $secretKey);
        $token = $auth->uploadToken($bucketName);

        return success($token);
    }

大致就这些,对于跨域以及七牛云的配置相信你们能够解决!!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值