1.七牛的包肯定是要在后台先装的

 <el-form-item label="缩略图" prop="image">
                <el-upload
                        class="avatar-uploader"
                        action="http://upload.qiniup.com"   //七牛云华东地区客户端存储的
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                        :data="qiniuForm">
                    <img v-if="ruleForm.image" :src="ruleForm.image" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>

2.data下面return内容

image.png

3.第一条绑定了两个事件，分别为上传成功前和成功后

image.png

4.写事件，需要用到uuid：https://www.npmjs.com/package/uuid

1.安装：cnpm install uuid --S
2.引入：const uuidv1 = require('uuid/v1');就在本页面引入
3.写事件

 handleAvatarSuccess(res, file) {
                this.ruleForm.image = 'http://xxxx-xx.xxx/' + res.key;
            },
            async beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                    return false;
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                    return false;
                }
                //如果验证失败,返回假
                if (isJPG && isLt2M == false) return false;

                //如果验证成功,获取token
                let fileType = file.type == 'image/jpeg' ? 'jpg' : 'png';//获取拓展名
                let res = await this.axios.get(`http://localhost:8000/Api/UploadToken/index`) //后台控制器位置
                //console.log(res);
                this.$notify({
                    title: '成功',
                    message: '上传成功',
                    type: 'success'
                });
                this.qiniuForm = {
                    ket: `${uuidv1()}.${fileType}`,//文件名
                    token: res.data
                }

                return true;
            },

后台

namespace Api\Controller;

use Think\Controller;
use Qiniu\Auth;
class UploadTokenController extends Controller
{
    public function index()
    {
        $bucket = '存储空间名字';
        $accessKey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
        $secretKey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
        $auth = new Auth($accessKey, $secretKey);
        $upToken = $auth->uploadToken($bucket);
        $this->ajaxReturn($upToken);
    }
}

测试一下返回token