提交 46b6a6e1 编写于 作者: P Pan

add qiniu upload example

上级 e8fb41d0
// import fetch, { tpFetch } from 'utils/fetch';
import fetch from 'utils/fetch';
// export function getToken() {
// return fetch({
// url: '/qiniu/upload/token',
// method: 'get'
// });
// }
// export function upload(data) {
// return tpFetch({
// url: 'https://upload.qbox.me',
// method: 'post',
// data
// });
// }
// /* 外部uri转七牛uri*/
// export function netUpload(token, net_url) {
// const imgData = {
// net_url
// };
// return fetch({
// url: '/qiniu/upload/net/async',
// method: 'post',
// data: imgData
// });
// }
export function getToken() {
return fetch({
url: '/qiniu/upload/token', // 假地址 自行替换
method: 'get'
});
}
<template>
<el-upload
action="https://upload.qbox.me"
:data="dataObj"
drag
:multiple="true"
:before-upload="beforeUpload">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
</el-upload>
</template>
<script>
import { getToken } from 'api/qiniu'; // 获取七牛token 后端通过Access Key,Secret Key,bucket等生成token
// 七牛官方sdk https://developer.qiniu.com/sdk#official-sdk
export default{
data() {
return {
dataObj: { token: '', key: '' },
image_uri: [],
fileList: []
}
},
methods: {
beforeUpload() {
const _self = this;
return new Promise((resolve, reject) => {
getToken().then(response => {
const key = response.data.qiniu_key;
const token = response.data.qiniu_token;
_self._data.dataObj.token = token;
_self._data.dataObj.key = key;
resolve(true);
}).catch(err => {
console.log(err)
reject(false)
});
});
}
}
}
</script>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册