在vue中配合element-ui使用vue-quill-editor编辑器及七牛文件上传

git地址：https://gitee.com/crui14994/myExample/tree/master/edit-qiniu-example

开发前准备

注：使用七牛上传前先进入server文件夹运行服务器代码便于获取token

1. 注册一个七牛云账号

2. 空间名称bucket

3. SK 和 AK ,在控制面板的密匙管理

4. 储存空间的外链域名，在储存空间可以找到

使用脚手架初始化项目

# 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

# 用cnpm 命令安装vue-cli了，在命令行输入下面的命令：
cnpm install vue-cli -g

# 用vue init命令来初始化项目
vue init webpack edit

# 在项目目录和server目录分别进行安装依赖
cnpm install

# 运行项目
npm run dev

---

安装vue-quill-editor 和 element-ui及七牛

vue-quill-editor

//安装
npm install vue-quill-editor --save

在全局中使用

import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor'
 
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
 
Vue.use(VueQuillEditor, /* { default global options } */)

在组件中使用

// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
  components: {
    quillEditor
  }
}

其它使用场景 参照npm包官方地址

详细代码查看：https://gitee.com/crui14994/myExample/blob/master/edit-qiniu-example/src/components/Edit.vue

element-ui

//安装
cnpm i element-ui -S

//使用 main.js 中写入以下内容
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

七牛 官方API文档

//安装
npm install qiniu-js --save

//在组件中引用
import * as qiniu from "qiniu-js";

---

用node写服务端代码，用于发送一个上传凭证的token

在src 目录里面创建一个server来编写服务端的代码；进入server目录

npm init
npm i express qiniu --save

创建app.js

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

创建config.js以用来生成上传凭证

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

// 创建上传凭证
const accessKey = '你的accessKey'
const secretKey = '你的secretKey'
const mac = new qiniu.auth.digest.Mac(accessKey, secretKey)
const options = {
  scope: '你的空间名称bucket',
  expires: 7200
}
const putPolicy = new qiniu.rs.PutPolicy(options)
const uploadToken = putPolicy.uploadToken(mac)

module.exports = {
  uploadToken
}

在server目录下运行 node app.js开启服务

node app.js

前端页面

在项目中新建upload.vue

<template>
  <!-- upload -->
  <div class="upload">
    <el-upload
      class="avatar-uploader"
      :action= domain
      :http-request = upqiniu
      :show-file-list="false"
      :before-upload="beforeUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>
<script>
export default {
  data () {
    return {
      imageUrl: '',
      // 七牛云的上传地址，根据自己所在地区选择，我这里是华南区
      domain: 'https://upload-z2.qiniup.com',
      // 这是七牛云空间的外链默认域名
      qiniuaddr: 'ptor0ux9h.bkt.clouddn.com'
    }
  },
  created(){
  },
  methods: {
    // 上传文件到七牛云
    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 = 'caorui' + new Date() + Math.floor(Math.random() * 100) + '.' + filetype
      // 从后端获取上传凭证token
      this.axios.get('/api/get7Token').then(res => {
        
        const formdata = new FormData()
        formdata.append('file', req.file)
        formdata.append('token', res.data)
        formdata.append('key', keyname)
        // 获取到凭证之后再将文件上传到七牛云空间
        this.axios.post(this.domain, formdata, config).then(res => {
          this.imageUrl = 'http://' + this.qiniuaddr + '/' + res.data.key
          // console.log(this.imageUrl)
        })
      })
    },
    // 验证文件合法性
    beforeUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>
<style scoped>
.upload {
  width: 600px;
  margin: 0 auto;
}
.avatar-uploader .el-upload {
  border: 5px dashed #ca1717 !important;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

解决跨域问题

打开config文件夹下的index.js,添加跨域代理访问

proxyTable: {
      '/api': {
        target: 'http://127.0.0.1:3000/',//设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,//如果需要跨域
        pathRewrite: {
          '^/api': '/'
                // //这里理解成用面的地址，
                // 后面组件中我们掉接口时直接用api代替 比如我要调
                // 用'http://425.0.100.100:8888/user/add'，直接写‘/api/user/add’即可
        }
      }
    },

参考文章

element UI+七牛云快速搭建图片服务器

vue 七牛云上传文件步骤及问题汇总

vue-quill-editor 封装成组件；图片文件流上传；同一页面多个编辑器样式异常解决办法