elementui php上传图片,使用element-ui的upload组件上传图片文件到七牛云的填坑记录...

最近要做一个上传文件到七牛的功能，没看官方文档之前认为蛮简单的，看完之后就蒙比了。太乱了吧，也许是搞的太晚了，没心思认真看文档。废话不多说了

流程：前端先get后端的uptoken，选择文件后上传到七牛，七牛上传成功重定向到设置的back页面，end

//html

class="upload-demo"

action="//up.qbox.me/"

type="drag"

:accept="accepts"

:before-upload="beforeUpload"

:on-success="handleSuccess"

:data="form" //uptoken 和key

:on-remove="handleRemove"

>

点击上传

只能上传jpg/png/zip文件，且不超过500kb

//js

export default {

data () {

return {

loading: false,

bucketHost: 'https://***********/', // 上传图片的外链域名,七牛设置的

form: { //存放获取到uptoken 和 key

token: '', //需要经过编译，并不是直接复制七牛账号里面的token

key: '' //这个key也不是七牛账号的key，key可以重命名上传的文件名，其他作用不太记得了

},

accepts: 'image/jpeg, image/jpg, image/png, image/gif, application/zip, application/x-zip-compressed',

//运行上传图片和zip文件

}

},

mounted () {

this.getUptoken()//先从服务器请求uptoken

},

methods: {

getUptoken () {

let _this = this

this.$http.jsonp(this.rootUrl2 + '/uptoken.php', { emulateJSON: true })

.then(function (response) {

_this.form.token = response.body.data

})

},

beforeUpload (file) { //每次上传文件之前设置key

let suffix = file.name

let key = encodeURI(`${suffix}`)

this.form.key = key

return this.form

}

2.php代码，这个主要3个php文件还一个src文件夹是官方php SDK里面的复制过来就可以

uptoken.php

这里要注意了：ReturnUrl 和 ReturnBody首字母一定要大写，否则重定向不成功

require_once 'autoload.php';

header('Access-Control-Allow-Origin:*');

use Qiniu\Auth;

$bucket = 'gond*******'; //你要上传七牛的空间名

$accessKey = '***********ak';

$secretKey = '************sk';

$auth = new Auth($accessKey, $secretKey);

//$upToken = $auth->uploadToken($bucket);

$policy = array(

//图片上次成功后七牛重定向的链接，不指定上传成功会报303的错

'ReturnUrl' => 'https://gongyicloud.com.cn/fileinfo.php',

'ReturnBody' => '{"fname": $(fname)}',

);

$upToken = $auth->uploadToken($bucket, null, 3600, $policy);

$array = array('code'=>'0','data' =>$upToken);

echo $_GET['callback'].'('.json_encode($array).')';

autoload.php

function classLoader($class)

{

$path = str_replace('\\', DIRECTORY_SEPARATOR, $class);

$file = __DIR__ . '/src/' . $path . '.php';

if (file_exists($file)) {

require_once $file;

}

}

spl_autoload_register('classLoader');

require_once __DIR__ . '/src/Qiniu/functions.php';

fileinfo.php

header('Access-Control-Allow-Origin:*');

$ret = base64_decode($_GET['upload_ret']);

$cbody = json_decode($ret, true);

$dn = 'https://gongyiclo*********d.com/'; //七牛你自己设置的外链默认域名

error_log(print_r($cbody, true));

$url = $dn . $cbody['fname'];

error_log($url);

$stat_ = file_get_contents($url . '?stat');

$stat = json_decode($stat_, true);

$mtype = $stat['mimeType'];

$isImage = substr($mtype, 0, 6) == 'image/';

$array = array('code'=>'0','data' =>$url);

echo $_GET['callback'].'('.json_encode($array).')';

?>