用vue的element-ui的upload实现上传头像图片资源到七牛云

通过element-ui的upload实现上传资源到七牛云功能的时候遇到了很多问题，现在和大家分享出来。

一、上传头像组件com_user_head_upload.vue：

<template>

<div>

<el-upload

class="avatar-uploader"

:action="qiniu.actionPath"

:show-file-list="false"

:data="qiniu.postData"

accept="image/*"

:on-success="handleAvatarHeadSuccess"

:before-upload="beforeAvatarHeadUpload"

:on-change="imageCardOneChange"

:file-list="headList">

<div class="uploadDemoBox">

<i class="addIcon">+</i>

<i class="message">点击上传</i>

</div>

</el-upload>

</div>

</template>

 

<script>

import {mapGetters,mapActions,mapMutations } from 'vuex'

import {qiniuTokenCreate} from "@/assets/js/qiniu/qiniuTokenCreate"

import { createUserHead } from '@/api/resource'

import { Message } from 'element-ui'

export default {

props: {

},

data () {

return {

headList:[],

// 头像上传

userHeadImg: '',

// 七牛云上传

qiniu:{

actionPath:'https://upload.qiniup.com/', // 放七牛云的地址

imageUrl: '',

postData:{

'token':'',

'domain':'',

}

},

}

},

computed:{

...mapGetters({

editor_id:'editor_id',

organization_id:'organization_id'

}),

},

methods: {

...mapActions([

'createUserHeadAction',

]),

...mapMutations([

'createUserHeadMutations',

'createImageListMutations',

]),

imageCardOneChange(file, fileList){

let timestamp = (new Date()).valueOf(); //时间戳

// 加上时间戳，防止，当所上传的文件已存在而报614错误的问题

this.qiniu.postData.key = timestamp + '/' + file.name

let str=file.name.substr(0,10)+"..."

fileList[0].name=str

//七牛koken

let token=qiniuTokenCreate('image')

this.qiniu.postData.token=token;

//设置资源访问地址

this.qiniu.postData.domain="http://image.i.haierzhongyou.com/"

},

handleAvatarHeadSuccess(res, file,fileList) {

let key=null

let resKey=res.key

if(resKey.indexOf(".png") != -1){

key=res.key.replace(".png","")

}else if(resKey.indexOf(".jpg") != -1){

key=res.key.replace(".jpg","")

}else if(resKey.indexOf(".gif") != -1){

key=res.key.replace(".gif","")

}else if(resKey.indexOf(".b