七牛云图片上传:使用element-ui的upload组件

昨天问了一下element团队,他们还没有试过用element-ui的upload组件传图片到七牛云

我试了一天发现没问题,同时觉得七牛并没有一个前端后端流程都演示到的demo,于是再次记录一波

流程

  1. 后端配置好七牛相关的accessKey
  2. 后端构建好上传策略,用来生成消费次数只有1次的上传Token
  3. 后端暴露一个api,返回上面的Token
  4. 前端在上传前请求后端的api获得上传Token
  5. 前端上传完毕,获得七牛返回的图片地址

前置

七牛相关

  • 公钥和私钥
  • 一个对象存储Bucket
  • 一个数据处理队列Pipeline
  • Bucket的一个外链域名

对应配置字段

qiniuAccessKey: '',
qiniuSecretKey: '',
qiniuBucketHost: '',
qiniuBucketName: '',
qiniuPipeline: ''

文档

后端

let qiniu = require("qiniu")

qiniu.conf.ACCESS_KEY = qiniuAccessKey;
qiniu.conf.SECRET_KEY = qiniuSecretKey;

let fops = 'imageMogr2/format/webp'

const policy = (name, fileName) => {
    let encoded = new Buffer(`${qiniuBucketName}:webp/${fileName}`).toString('base64')
    let persist
    if (qiniuPipeline !== '') {
        persist = {
            persistentOps: `${fops}|saveas/${encoded}` ,
            persistentPipeline: qiniuPipeline
        }
    } else {
        persist = {}
    }
    return Object.assign({},persist,{
        scope: name,
        deadline: new Date().getTime() + 600,
    })
}

const getQiniuTokenFromFileName = (fileName) => {
    let key = `${qiniuBucketName}:${fileName}`
    let putPolicy = new qiniu.rs.PutPolicy2(policy(key, fileName));

    let upToken = putPolicy.token();

    return { 
        upToken,
        key,
        bucketHost,
        supportWebp: qiniuPipeline !== ''
    };

}

module.exports = getQiniuTokenFromFileName;

如上代码,导出一个参数为文件存储根路径的函数,再用它新增一个路由即可

主要调用了qiniu.rs.PutPolicy2这个api,传入一个上传策略对象,生成一个消费次数只有一次的图片上传token,供给前端上传

上传策略只需要指定文件根路径scope以及deadline,除此之外,上面的代码还另外调用了多媒体图像高级处理接口,将图片异步转为webp格式,并在最终导出一个是否支持webp的supportWebp字段。

这里有一个坑,persistentOps字段要求是base64编码,然而其他的api又要求url编码,坑了我半天

前端

HTML

<el-dialog title="图片上传" v-model="isUploadShow">
      <el-upload
        action="//up.qbox.me/"
        type="drag"
        :thumbnail-mode="true"
        :on-success="handleSuccess"
        :before-upload="beforeUpload"
        :data="form"
        >
        <i class="el-icon-upload"></i>
    </el-upload>
    </el-dialog>

七牛up.qbox.me域名支持http和https上传。api文档里并没有写这个,而是写在Q&A里的

JS

data () {
    return {
      isUploadShow: false,  // 是否显示upload组件
      supportWebp: false,   // 是否支持webp
      bucketHost: '',   // 上传图片的外链域名
      form: {}  
    }
  }

vue2组件的data如上

beforeUpload (file) {
      let curr = moment().format('YYYYMMDD').toString()
      let prefix = moment(file.lastModified).format('HHmmss').toString()
      let suffix = file.name
      let key = encodeURI(`${curr}/${prefix}_${suffix}`)
      return api.getImageToken({ key }).then(response => {
        this.bucketHost = response.bucketHost
        this.supportWebp = response.supportWebp
        this.form = {
          key,
          token: this.upToken
        }
      })
    },

通过getImageToken这个api,将上传token请求下来,并获得图片外链的地址,以及是否支持webp,如果支持webp,上传成功后就给图片链接根路径加上webp/前缀。

handleSuccess (response, file, fileList) {
      let key = response.key
      let name = file.name
      let prefix = this.supportWebp ? 'webp/' : ''
      let img = `![${name}](${this.bucketHost}/${prefix}${encodeURI(key)})`
    },
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
以下是使用若依(RuoYi)框架、Vue.js和element-ui实现图片上传七牛云的步骤: 1. 首先,确保你已经安装了若依(RuoYi)框架,并且已经配置好了七牛云的相关信息。 2. 在Vue组件中引入element-uiel-upload组件,并设置相关属性和事件监听。 3. 在el-upload组件的before-upload事件中,编写上传文件到七牛云的逻辑。 4. 在上传文件的逻辑中,首先需要引入七牛云的JS SDK,并初始化相关配置。 5. 在上传文件的逻辑中,使用七牛云API将文件上传到七牛云。 6. 在上传成功后,可以根据需要进行一些操作,例如更新页面上的附件列表等。 下面是一个示例代码,演示了如何使用若依、Vue.js和element-ui实现图片上传七牛云的功能: ```vue <template> <div> <el-upload class="upload-demo" action="/api/upload" :before-upload="beforeUpload" :on-success="onSuccess" :on-error="onError" :file-list="fileList" :auto-upload="false" :limit="3" :on-exceed="handleExceed" :on-remove="handleRemove" > <el-button size="small" type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div> </el-upload> </div> </template> <script> export default { data() { return { fileList: [] }; }, methods: { beforeUpload(file) { const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'; const isLt500K = file.size / 1024 < 500; if (!isJPG) { this.$message.error('只能上传jpg/png文件'); } if (!isLt500K) { this.$message.error('文件大小不能超过500kb'); } return isJPG && isLt500K; }, onSuccess(response, file, fileList) { // 上传成功后的操作,例如更新附件列表等 this.fileList = fileList; }, onError(error, file, fileList) { // 上传失败后的操作 this.$message.error('上传失败'); }, handleExceed(files, fileList) { this.$message.warning('只能上传3个文件'); }, handleRemove(file, fileList) { // 删除文件后的操作 this.fileList = fileList; } } }; </script> ``` 请注意,上述代码中的`/api/upload`是上传文件的接口地址,你需要根据实际情况进行修改。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值