vue element-ui upload 实现带token上传

<el-upload
                       
                        :data ="uploadData"
                        :headers = "headers"
                        action="http://test/post"
                        :show-file-list="false"
                        list-type="picture"
                        accept="image/jpg,image/jpeg,image/png,image/gif,image/bmp"
                        :on-success="upSuccess"
                        multiple>
          
                </el-upload>

:header 在里面写要携带的token的参数,:data 是携带一同传过去的数据的参数

export default {
  data () {
    return {
      headers: {
        Authorization: util.cookies.get('token') 
      },
    }
  }

 }

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,你需要在你的 Vue 项目中安装 `qiniu-js` 包,这个包可以帮助你将文件上传到七牛云。 安装命令:`npm install qiniu-js` 然后,在你的 Vue 组件中引入 `qiniu-js` 包,代码如下: ``` import * as qiniu from 'qiniu-js' ``` 接下来,我们需要实现异步上传文件到七牛云的功能。假设我们已经有一个上传文件的方法 `handleUpload`,代码如下: ``` handleUpload(file) { const token = 'your-qiniu-upload-token' // 替换成你的七牛云上传凭证 const key = file.name // 文件名作为七牛云存储的文件名 const config = { useCdnDomain: true, // 是否使用七牛云的 CDN 域名 } const putExtra = { fname: file.name, // 文件原始名字 params: {}, // 上传额外参数 mimeType: null // 上传文件类型 } const observable = qiniu.upload(file, key, token, putExtra, config) const observer = { next(res) { // 上传进度回调 console.log(res.total.percent) }, error(err) { // 上传失败回调 console.log(err) }, complete(res) { // 上传成功回调 console.log(res) } } const subscription = observable.subscribe(observer) // 执行上传操作 } ``` 在上面的代码中,我们通过 `qiniu.upload` 方法来执行文件上传操作,参数依次为: - `file`: 要上传的文件对象 - `key`: 上传到七牛云后的文件名 - `token`: 七牛云上传凭证 - `putExtra`: 上传额外参数,包括文件名、上传参数和文件类型 - `config`: 上传配置,包括是否使用七牛云的 CDN 域名 在上传过程中,我们通过观察者模式来监听上传进度、上传成功和上传失败事件,并执行相应的回调函数。 最后,你可以在你的组件中调用 `handleUpload` 方法来上传文件,例如: ``` <el-upload action="" :before-upload="handleUpload" > <el-button type="primary">点击上传</el-button> </el-upload> ``` 在上面的代码中,我们使用了 Element UI上传组件,并将 `before-upload` 属性设置为 `handleUpload` 方法,这样就可以触发文件上传操作了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值