七牛云上传图片

                                                             页面部分


 <el-upload
//这是七牛云地址 (华东-浙江 )
            action="https://upload.qiniup.com"
 //这是自动上传
             :auto-upload="true"
// 点击上传 ;触发
            :on-success="uploadSuccess"
// 获取的 本地token
            :data="upload_data"
// 上传错误的提示
            :on-error="uploadError"
          >
            <!-- <el-upload
// 后端获取图片token的地址
            action="http://127.0.0.1:8000/brands/upload/files/"
            :auto-upload="true"
            :on-success="handleSuccessed"
          > -->
            <el-button size="small" type="primary">点击选择图片</el-button>
          </el-upload>
          <br><br>

       

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Vue 中使用七牛云进行图片上传,需要先在七牛云申请一个空间并获取 Access Key 和 Secret Key,然后安装相关的依赖库。 1. 安装依赖库: ``` npm install qiniu-js vue-qiniu-upload --save ``` 2. 在 Vue 中引入依赖: ``` import QiniuUpload from 'vue-qiniu-upload' import * as qiniu from 'qiniu-js' ``` 3. 在 Vue 组件中使用: ``` <template> <div> <qiniu-upload :domain="domain" :access-key="accessKey" :secret-key="secretKey" :path="path" :size="size" :accept="accept" :before="beforeUpload" :complete="uploadComplete" :error="uploadError" > <button>上传图片</button> </qiniu-upload> </div> </template> <script> export default { components: { QiniuUpload }, data () { return { domain: 'your-qiniu-domain', accessKey: 'your-access-key', secretKey: 'your-secret-key', path: '/upload', size: 10 * 1024 * 1024, accept: 'image/*' } }, methods: { beforeUpload (file) { // 可以在这里进行一些上传前的操作,比如图片压缩等 }, uploadComplete (res) { // 上传完成后的回调 console.log('上传完成', res) }, uploadError (err) { // 上传失败的回调 console.log('上传失败', err) } } } </script> ``` 以上代码中,`QiniuUpload` 组件是我们刚才引入的依赖库中提供的,通过传入相关参数就可以进行图片上传了。在 `beforeUpload` 方法中可以对图片进行一些处理,比如压缩等操作。`uploadComplete` 和 `uploadError` 分别是上传成功和上传失败后的回调函数,可以进行一些相关的操作。 注意,上传图片之前需要在七牛云中进行配置,具体可以参考七牛云的文档。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值