Vue图片的上传和富文本的上传图片到七牛云后端用node

本文链接：https://blog.youkuaiyun.com/gscdf/article/details/129780058

本文介绍了如何在Vue项目中使用Element UI的图片上传组件，结合后端Node.js实现图片上传到七牛云存储。首先，展示了Vue2和Vue3通用的上传代码，包括定义方法和调用方法来实现七牛云存储的上传。接着，提到了后端部分，需要安装qiniu库，并基于Express框架编写相关处理代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.vue用elemnet图片上传组件前端代码和后端代码

vue2的上传方式和vue3的一样

  用element unload 组件 

 <el-upload
      class="avatar-uploader"
      :action= domain
      :http-request = upqiniu   
      :show-file-list="false"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>

然后用到定义方法

 data () {
    return {
      imageUrl: '',
      token: {},
      // 七牛云的上传地址，根据自己所在地区选择，我这里是华南区
      domain: 'http://upload-z1.qiniup.com',
      // 这是七牛云空间的外链默认域名
      qiniuaddr: 'rr56s8jzk.hb-bkt.clouddn.com'
    }
  },

最后调用方法可以上传到七牛云了

 upqiniu (req) {
      console.log(req)
      const config = {
        headers: {'Content-Type': 'multipart/form-data'}
      }
      let filetype = ''
      if (req.file.type === 'image/png') {
        filetype = 'png'
      } else {
        filetype = 'jpg'
      }
      // 重命名要上传的文件
      const keyname = 'lytton' + new Date() + Math.floor(Math.random() * 100) + '.' + filetype
      // 从后端获取上传凭证token
      axios.get('http://127.0.0.1:4000/token').then(res => {
        console.log(res)
        const formdata = new FormData()
        formdata.append('file', req.file)
        formdata.append('token', res.data)
        formdata.append('key', keyname)
      
        // 获取到凭证之后再将文件上传到七牛云空间
       axios.post(this.domain,formdata,config).then(res => {
        console.log(res);
          this.imageUrl = 'http://' + this.qiniuaddr + '/' + res.data.key
        })
      })
    },

2.后端node代码

当然你先得 npm i qiniu然后才可以使用~
框架用的是express ，这部分就不讲了。

app.js中
// 引入包
const express = require('express')
const bodyparse = require('body-parser')
// 创建服务
const app = express()
// 解析数据
const cors = require('cors')
app.use(cors())
app.use(bodyparse.json())
// 引入七牛云配置
const qnconfig = require('./config.js')
// 处理请求
app.get('/token', (req, res, next) => {
  // console.log(qnconfig.uploadToken)
  res.status(200).send(qnconfig.uploadToken)
})
// 监听3000端口
app.listen(4000, () => {
  console.log('启动3000!')
})

/*
七牛云配置
*/
const qiniu = require('qiniu')

// 创建上传凭证
const accessKey = 'kYpsrVjS8dDvRoLH42lR7pyicW7-1DEoFhvlMRzf' //这里填写七牛云的accessKey，我用*代替 
const secretKey =  'fRrF6UEyKSCRuTQZC9TdImH3rUxibjv5yVwFgMxz'
const mac = new qiniu.auth.digest.Mac(accessKey, secretKey)
const options = {
  scope: 'imgcun',//这里填写七牛云空间名称
  expires: 7200
}
const putPolicy = new qiniu.rs.PutPolicy(options)
const uploadToken = putPolicy.uploadToken(mac)

module.exports = {
  uploadToken
}

这样就可以了