vue上传文件到七牛云

## vue 中上传文件到七牛云

<template>
  <div class="accessoryBox">
    <!--附加列表展示-->
    <div class="fileListBox" v-for="file in meetingInfo.FileSub">
      <font-awesome-icon :icon="['fas', 'minus-circle']" @click="removeFile(file)" class="delFile"/>
      <!--1表示图片-->
      <a href="javascript:void(0)" v-if="showImg(file.FileName) === 1">
        <img v-image-preview :src="file.FileAddress" class="uploadImg"/>
      </a>
      <!--2表示文本pdf-->
      <a :href="file.FileAddress+'?attname='+file.FileName"  v-if="showImg(file.FileName) === 2">
        <img src="http://qiniu.edianping.com/fileicon_pptd344a95f69234a8b85e0014c86f57a90.png" class="uploadImg">
      </a>
      <!--3表示位置文件-->
      <a :href="file.FileAddress+'?attname='+file.FileName"  v-if="showImg(file.FileName) === 3">
        <img src="http://qiniu.edianping.com/fileicon_unkown8d953bad9aa643a4b5b990261ca58f5f.png" class="uploadImg">
      </a>
      <!--4表示excel-->
      <a :href="file.FileAddress+'?attname='+file.FileName"  v-if="showImg(file.FileName) === 4">
        <img src="http://qiniu.edianping.com/fileicon_xls04e68800e1384e679afb5428e434e390.png" class="uploadImg">
      </a>
      <!--6代表word文档-->
      <a :href="file.FileAddress+'?attname='+file.FileName"  v-if="showImg(file.FileName) === 6">
        <img src="http://qiniu.edianping.com/fileicon_word77f8c66c8bb8471588d89a4fc2274d13.png" class="uploadImg">
      </a>
      <!--7 mp4-->
      <a :href="file.FileAddress+'?attname='+file.FileName"  v-if="showImg(file.FileName) === 7">
        <img src="http://qiniu.edianping.com/fileicon_videoa0d27fa78b0d4f699624e0dbf940e399.png" class="uploadImg">
      </a>
      <!--8 mp3-->
      <a :href="file.FileAddress+'?attname='+file.FileName"  v-if="showImg(file.FileName) === 8">
        <img src="http://qiniu.edianping.com/fileicon_musicf66370d23678426480d806f8ef73a2fa.png" class="uploadImg">
      </a>
    </div>
      <el-progress :percentage="uploadProgress" v-show="showProgress" color="#67c23a" type="circle" :width="50"></el-progress>
    <!--点击开始添加附件-->
    <div class="pickFileBox">+ <input type="file" class="pickImg" @change="uploadFile" title="添加附件"/></div>
  </div>
</template>

<script>
  import * as qiniu from 'qiniu-js'
  import {getQiniuUpToken} from '@/utils/upload'
  import {getFileType} from '@/utils/index'
  import {QINIU_URL} from '@/api/circleplus'

  export default {
    data() {
      return {
        showProgress: false,
        uploadProgress: 0,
        qiniuUrl: ''
      }
    },
    mounted() {
      this.qiniuUrl = QINIU_URL
    },
    props: {
      meetingInfo: {}
    },
    methods: {
      showImg(data) {
        const fileType = getFileType(data)
        // console.log(fileType)
        // if (fileType === 1) {
        //   return true
        // }
        // return false
        return fileType
      },
      // 删除附件
      removeFile(delFile) {
        this.$confirm('确定要删除该附件吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          for (let i = 0; i < this.meetingInfo.FileSub.length; i++) {
            const item = this.meetingInfo.FileSub[i]
            if (item.FileName === delFile.FileName) {
              this.meetingInfo.FileSub.splice(i, 1)
            }
          }
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.$emit('uploadFileSub')
          this.$emit('delFile', delFile.Id)
        })
      },
      // 上传附件
      uploadFile($event) {
        const file = $event.target.files[0]
        console.log(file)
        // 限制上传文件的大小为200M
        if (file.size > 209715200) {
          const cur_size = Math.floor(file.size * 100 / 1024 / 1024) / 100
          this.$notify.info({
            title: '消息',
            message: '上传文件大小不得超过200M 当前文件' + cur_size + 'M '
          })
          return false
        }
        getQiniuUpToken().then(res => {
          console.log(res)
          this.showProgress = true
          const fileName = file.name
          const suffix = fileName.substring(fileName.lastIndexOf('.')) // 后缀名
          const prefix = fileName.substring(0, fileName.lastIndexOf('.'))
          const key = prefix + res.UniqueKey + suffix // 上传文件名
          const token = res.UpToken
          const observer = {
            next: response => {
              // 上传进度'+Math.floor(response.total.percent)+'%'
              this.uploadProgress = Math.floor(response.total.percent)
            },
            error: err => {
              // 失败
              this.$message.error('上传失败' + err.message)
              console.log(err)
            },
            complete: response => {
              // hash:"FnQ-sovAjUYCBRTgrK4GpwJWyFFW"
              // key:"yuantiao88ca81cdfb2443a4842fef0fc503325b.jpg"
              this.uploadProgress = 0
              this.showProgress = false
              this.meetingInfo.FileSub.push({
                FileName: response.key,
                FileAddress: QINIU_URL + response.key,
                FileType: getFileType(response.key),
                Remarks: file.name
              })
              this.$emit('uploadFileSub')
              this.$emit('addFile', response, file.name)
            }
          }
          const putExtra = {
            fname: '',
            params: {},
            mimeType: null
            // mimeType: ['image/png', 'image/jpeg', 'image/gif']
          }
          const config = {}
          const observable = qiniu.upload(file, key, token, putExtra, config)
          observable.subscribe(observer) // 上传开始
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .accessoryBox {
    .delFile{
      opacity: 0;
    }
    .fileListBox:hover .delFile{
      opacity: 1;
    }
    .fileListBox {
      position: relative;
      display: inline-block;
      svg {
        position: absolute;
        right: 2px;
        top: 0;
        color: red;
        cursor: pointer;
      }
    }
    .uploadImg {
      height: 50px;
      width: 50px;
      border-radius: 5px;
      margin-right: 5px;
    }
    .pickFileBox {
      position: relative;
      display: inline-block;
      border-radius: 5px;
      overflow: hidden;
      display: inline-block;
      border: 1px solid #ccc;
      height: 50px;
      width: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 30px;
      color: #ccc;
      cursor: pointer;
    }

    .pickFileBox input {
      position: absolute;
      right: 0;
      top: 0;
      opacity: 0;
      cursor: pointer;
    }
  }
</style>


关键点：
1.获取后台返回的token
2.qiniu.upload(file: blob, key: string, token: string, putExtra: object, config: object) 查找这里面存在的几个配参数
3.编写上传的几个步骤
	

const observer = {
next: response => {

        },
        error: err => {
      
        },
        complete: response => {
          
        }
      }

4.执行七云开始上传
	var observable = qiniu.upload(file, key, token, putExtra, config)
	var subscription = observable.subscribe(observer) // 上传开始