add qiniu upload example
This commit is contained in:
parent
e8fb41d0ff
commit
46b6a6e19f
2 changed files with 51 additions and 27 deletions
|
@ -1,28 +1,8 @@
|
|||
// 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'
|
||||
});
|
||||
}
|
||||
|
|
44
src/views/qiniu/upload.vue
Normal file
44
src/views/qiniu/upload.vue
Normal file
|
@ -0,0 +1,44 @@
|
|||
<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>
|
Loading…
Reference in a new issue