vue php图片上传,vue后台传token的上传图片

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

class="avatar-uploader"

action="http://upload.qiniup.com" //七牛云华东地区客户端存储的

:show-file-list="false"

:on-success="handleAvatarSuccess"

:before-upload="beforeAvatarUpload"

:data="qiniuForm">

2.data下面return内容

image.png

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

image.png

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