express+elementui上传图片到七牛云

Question

个人对于该解决方法的思路是：
首先，vue通过axios接收express提供的token，
然后，element-ui把token发送post到七牛，得到响应发送成功并返回个图片路径（网址），
最后，express存储该路径到服务器下mongodb数据库上，下次要用直接返回接口给前端即可。
小白一枚，目前查找了不下10篇网友的文献，仍不知道怎么写，所以请问下有写过这方面的大佬能贴下代码或者给篇比较适合小白的文章地址么？

虽然看到sf上也有关于该问题的回复，但是初学前后端分离配合mongodb，有点蒙蔽，所以求个下下策问问大家了，谢谢！

Answer 1

express+elementui
这个是什么插件?具体是做什么的?

Answer 2

基于element-ui 2.3.2的 上传

html部分

<div class="upload-demo">
      <el-upload
        ref="upload"
        v-show="!upLoading"
        drag
        :multiple="false"
        action="//up.qiniu.com/"
        accept="video/*"
        :show-file-list="false"
        :on-success="uploadSuccess"
        :before-upload="beforeUpload"
        :on-progress="onprogressUpload"
        :data="qiniuForm"
        :limit="1">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传mp4/mov文件，且不超过100MB</div>
      </el-upload>
      <div class="text-center" v-show="upLoading">
        <el-progress type="circle" :percentage="percentage"></el-progress>
      </div>
      <div class="text-center" v-show="upLoading" style="margin-top: 15px">
        <el-button type="text" round style="margin-top: 15px" size="mini">正在上传，请不要关闭当前窗口...</el-button>
      </div>
    </div>

js部分

<script>
  export default {
    name: "upload",
    data() {
      return {
        upLoading: false,
        percentage: 0,
        qiniuForm: {
          'key': '',
          'token': ''
        }
      }
    }, methods: {
      //上传前置操作
      beforeUpload(file) {
        let that = this
        const isJPG = file.type === 'video/mov'
        const isPNG = file.type === 'video/mp4'
        const isLt2M = file.size / 1024 / 1024 <= 100
        if (!isJPG && !isPNG) {
          this.$message.error('上传视频文件只能是 mov/mp4 格式!')
          return false
        }
        if (!isLt2M) {
          this.$message.error('上传视频文件大小不能超过 100MB!')
          return false
        }
        //获取七牛的token，基于axios封装的请求方式
        return this.$https.ajax.get('video/qiniu/token').then(res => {
          if (res.status == 1) {
            that.upLoading = true
            that.qiniuForm = res.data
          } else {
            that.$message.error(res.msg)
            return false
          }
        })
      },
      //正在上传
      onprogressUpload(event) {
        this.percentage = parseInt(event.percent)
      },
      //上传成功后操作
      uploadSuccess(response) {
        let key = response.key, that = this
        //上传成功后，请求后端更新数据库.
        this.$https.ajax.post('video/index/index', {key: key}).then(res => {
          that.upLoading = false
          if (res.status == 1) {
           //跳转到新的页面
            that.$router.push({
              'path': '/user/video'
            })
          }else{
           //清除上传文件队列
            that.$refs.upload.clearFiles()
          }
        })
      }

    }
  }
</script>