增加阿里云oss上传
This commit is contained in:
parent
183b646167
commit
408f0eaa29
|
|
@ -7,7 +7,6 @@ const devEnv = require('./dev.env')
|
|||
|
||||
module.exports = {
|
||||
dev: {
|
||||
|
||||
// Paths
|
||||
assetsSubDirectory: 'static',
|
||||
assetsPublicPath: '/',
|
||||
|
|
|
|||
213
package.json
213
package.json
|
|
@ -1,108 +1,109 @@
|
|||
{
|
||||
"name": "sqx",
|
||||
"version": "1.2.2",
|
||||
"author": "maxd",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
|
||||
"start": "npm run dev",
|
||||
"unit": "jest --config test/unit/jest.conf.js --coverage",
|
||||
"e2e": "node test/e2e/runner.js",
|
||||
"test": "npm run unit && npm run e2e",
|
||||
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
|
||||
"build": "gulp"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "0.17.1",
|
||||
"babel-plugin-component": "0.10.1",
|
||||
"babel-polyfill": "6.26.0",
|
||||
"echarts": "^5.5.1",
|
||||
"element-china-area-data": "^5.0.2",
|
||||
"element-ui": "2.8.2",
|
||||
"fs": "0.0.1-security",
|
||||
"gulp-concat": "2.6.1",
|
||||
"gulp-load-plugins": "1.5.0",
|
||||
"gulp-replace": "0.6.1",
|
||||
"hls.js": "^1.5.17",
|
||||
"lodash": "4.17.5",
|
||||
"mockjs": "^1.1.0",
|
||||
"npm": "^6.9.0",
|
||||
"sass-loader": "6.0.6",
|
||||
"svg-sprite-loader": "3.7.3",
|
||||
"video.js": "^8.20.0",
|
||||
"videojs-contrib-hls": "^5.15.0",
|
||||
"vue": "2.5.16",
|
||||
"vue-baidu-map": "^0.21.22",
|
||||
"vue-cookie": "1.1.4",
|
||||
"vue-jsonp": "^2.0.0",
|
||||
"vue-quill-editor": "^3.0.6",
|
||||
"vue-router": "3.0.1",
|
||||
"vuex": "3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "7.1.2",
|
||||
"babel-core": "6.22.1",
|
||||
"babel-eslint": "7.1.1",
|
||||
"babel-jest": "21.0.2",
|
||||
"babel-loader": "7.1.1",
|
||||
"babel-plugin-dynamic-import-node": "1.2.0",
|
||||
"babel-plugin-transform-es2015-modules-commonjs": "6.26.0",
|
||||
"babel-plugin-transform-runtime": "6.22.0",
|
||||
"babel-preset-env": "1.3.2",
|
||||
"babel-preset-stage-2": "6.22.0",
|
||||
"babel-register": "6.22.0",
|
||||
"chalk": "2.3.0",
|
||||
"copy-webpack-plugin": "4.0.1",
|
||||
"cross-spawn": "5.0.1",
|
||||
"css-loader": "0.28.0",
|
||||
"eslint": "3.19.0",
|
||||
"eslint-config-standard": "10.2.1",
|
||||
"eslint-friendly-formatter": "3.0.0",
|
||||
"eslint-loader": "1.7.1",
|
||||
"eslint-plugin-html": "3.0.0",
|
||||
"eslint-plugin-import": "2.7.0",
|
||||
"eslint-plugin-node": "5.2.0",
|
||||
"eslint-plugin-promise": "3.5.0",
|
||||
"eslint-plugin-standard": "3.0.1",
|
||||
"eventsource-polyfill": "0.9.6",
|
||||
"extract-text-webpack-plugin": "^3.0.2",
|
||||
"file-loader": "1.1.4",
|
||||
"friendly-errors-webpack-plugin": "1.6.1",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-shell": "^0.6.5",
|
||||
"html-webpack-plugin": "2.30.1",
|
||||
"jest": "21.2.0",
|
||||
"jest-serializer-vue": "0.3.0",
|
||||
"nightwatch": "0.9.12",
|
||||
"node-notifier": "5.1.2",
|
||||
"node-sass": "^4.14.1",
|
||||
"optimize-css-assets-webpack-plugin": "3.2.0",
|
||||
"ora": "1.2.0",
|
||||
"portfinder": "1.0.13",
|
||||
"postcss-import": "11.0.0",
|
||||
"postcss-loader": "2.0.8",
|
||||
"rimraf": "2.6.0",
|
||||
"selenium-server": "3.0.1",
|
||||
"semver": "5.3.0",
|
||||
"shelljs": "0.7.6",
|
||||
"uglifyjs-webpack-plugin": "1.1.1",
|
||||
"url-loader": "0.5.8",
|
||||
"vue-jest": "1.0.2",
|
||||
"vue-loader": "13.3.0",
|
||||
"vue-style-loader": "3.0.1",
|
||||
"vue-template-compiler": "2.5.16",
|
||||
"webpack": "3.6.0",
|
||||
"webpack-bundle-analyzer": "2.9.0",
|
||||
"webpack-dev-server": "^2.9.7",
|
||||
"webpack-merge": "4.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8.11.1",
|
||||
"npm": ">= 5.6.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 8"
|
||||
]
|
||||
"name": "sqx",
|
||||
"version": "1.2.2",
|
||||
"author": "maxd",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
|
||||
"start": "npm run dev",
|
||||
"unit": "jest --config test/unit/jest.conf.js --coverage",
|
||||
"e2e": "node test/e2e/runner.js",
|
||||
"test": "npm run unit && npm run e2e",
|
||||
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
|
||||
"build": "gulp"
|
||||
},
|
||||
"dependencies": {
|
||||
"ali-oss": "^6.21.0",
|
||||
"axios": "0.17.1",
|
||||
"babel-plugin-component": "0.10.1",
|
||||
"babel-polyfill": "6.26.0",
|
||||
"echarts": "^5.5.1",
|
||||
"element-china-area-data": "^5.0.2",
|
||||
"element-ui": "2.8.2",
|
||||
"fs": "0.0.1-security",
|
||||
"gulp-concat": "2.6.1",
|
||||
"gulp-load-plugins": "1.5.0",
|
||||
"gulp-replace": "0.6.1",
|
||||
"hls.js": "^1.5.17",
|
||||
"lodash": "4.17.5",
|
||||
"mockjs": "^1.1.0",
|
||||
"npm": "^6.9.0",
|
||||
"sass-loader": "6.0.6",
|
||||
"svg-sprite-loader": "3.7.3",
|
||||
"video.js": "^8.20.0",
|
||||
"videojs-contrib-hls": "^5.15.0",
|
||||
"vue": "2.5.16",
|
||||
"vue-baidu-map": "^0.21.22",
|
||||
"vue-cookie": "1.1.4",
|
||||
"vue-jsonp": "^2.0.0",
|
||||
"vue-quill-editor": "^3.0.6",
|
||||
"vue-router": "3.0.1",
|
||||
"vuex": "3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "7.1.2",
|
||||
"babel-core": "6.22.1",
|
||||
"babel-eslint": "7.1.1",
|
||||
"babel-jest": "21.0.2",
|
||||
"babel-loader": "7.1.1",
|
||||
"babel-plugin-dynamic-import-node": "1.2.0",
|
||||
"babel-plugin-transform-es2015-modules-commonjs": "6.26.0",
|
||||
"babel-plugin-transform-runtime": "6.22.0",
|
||||
"babel-preset-env": "1.3.2",
|
||||
"babel-preset-stage-2": "6.22.0",
|
||||
"babel-register": "6.22.0",
|
||||
"chalk": "2.3.0",
|
||||
"copy-webpack-plugin": "4.0.1",
|
||||
"cross-spawn": "5.0.1",
|
||||
"css-loader": "0.28.0",
|
||||
"eslint": "3.19.0",
|
||||
"eslint-config-standard": "10.2.1",
|
||||
"eslint-friendly-formatter": "3.0.0",
|
||||
"eslint-loader": "1.7.1",
|
||||
"eslint-plugin-html": "3.0.0",
|
||||
"eslint-plugin-import": "2.7.0",
|
||||
"eslint-plugin-node": "5.2.0",
|
||||
"eslint-plugin-promise": "3.5.0",
|
||||
"eslint-plugin-standard": "3.0.1",
|
||||
"eventsource-polyfill": "0.9.6",
|
||||
"extract-text-webpack-plugin": "^3.0.2",
|
||||
"file-loader": "1.1.4",
|
||||
"friendly-errors-webpack-plugin": "1.6.1",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-shell": "^0.6.5",
|
||||
"html-webpack-plugin": "2.30.1",
|
||||
"jest": "21.2.0",
|
||||
"jest-serializer-vue": "0.3.0",
|
||||
"nightwatch": "0.9.12",
|
||||
"node-notifier": "5.1.2",
|
||||
"node-sass": "^4.14.1",
|
||||
"optimize-css-assets-webpack-plugin": "3.2.0",
|
||||
"ora": "1.2.0",
|
||||
"portfinder": "1.0.13",
|
||||
"postcss-import": "11.0.0",
|
||||
"postcss-loader": "2.0.8",
|
||||
"rimraf": "2.6.0",
|
||||
"selenium-server": "3.0.1",
|
||||
"semver": "5.3.0",
|
||||
"shelljs": "0.7.6",
|
||||
"uglifyjs-webpack-plugin": "1.1.1",
|
||||
"url-loader": "0.5.8",
|
||||
"vue-jest": "1.0.2",
|
||||
"vue-loader": "13.3.0",
|
||||
"vue-style-loader": "3.0.1",
|
||||
"vue-template-compiler": "2.5.16",
|
||||
"webpack": "3.6.0",
|
||||
"webpack-bundle-analyzer": "2.9.0",
|
||||
"webpack-dev-server": "^2.9.7",
|
||||
"webpack-merge": "4.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8.11.1",
|
||||
"npm": ">= 5.6.0"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 8"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
class API {
|
||||
constructor(url,req) {
|
||||
const map={
|
||||
add:'POST',
|
||||
del:'DELETE',
|
||||
update:'PUT',
|
||||
get:'GET'
|
||||
}
|
||||
this.url=url
|
||||
for(let key in map){
|
||||
this[key]=function(data){
|
||||
data=Array.isArray(data)?data:{...data,shopId:uni.getStorageSync('shopId')}
|
||||
if(key==='del'){
|
||||
delete data.shopId
|
||||
}
|
||||
return req(url, data,map[key])
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default API
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
import $http from '@/utils/httpRequest'
|
||||
function add(data) {
|
||||
return $http({
|
||||
url: 'discSpinning/insertDiscSpinning',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
function del(data) {
|
||||
return $http({
|
||||
url: 'discSpinning/deleteDiscSpinning',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
function getList(data) {
|
||||
return $http({
|
||||
url: 'discSpinning/selectDiscSpinning',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
function get(id) {
|
||||
return $http({
|
||||
url: 'discSpinning/'+id,
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
function update(updatedata) {
|
||||
return $http({
|
||||
url: 'discSpinning/updateDiscSpinning',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
export default {
|
||||
add
|
||||
, del,
|
||||
get,getList,
|
||||
update
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import $http from '@/utils/httpRequest'
|
||||
export function $getCredentials(data) {
|
||||
return $http({
|
||||
url: 'alioss/getCredentials',
|
||||
method: 'get',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
|
@ -5,6 +5,12 @@ import qs from 'qs'
|
|||
import merge from 'lodash/merge'
|
||||
import { clearLoginInfo } from '@/utils'
|
||||
export const entryName = '短剧13.2系统';
|
||||
const $urlMap={
|
||||
local:'http://192.168.1.15:8100/sqx_fast/',
|
||||
product:'https://video.hnsiyao.cn/sqx_fast/',
|
||||
test:'https://video.hnsiyao.cn/sqx_fast/',
|
||||
}
|
||||
const $env='local'
|
||||
const http = axios.create({
|
||||
timeout: 1000 * 300,
|
||||
// withCredentials: true,
|
||||
|
|
@ -18,6 +24,9 @@ const http = axios.create({
|
|||
*/
|
||||
http.interceptors.request.use(config => {
|
||||
config.headers['token'] = Vue.cookie.get('token') // 请求头带上token
|
||||
config.baseURL = $urlMap[$env]
|
||||
const arr=config.url.split('sqx_fast/')
|
||||
config.url= $urlMap[$env]+(arr.length>=2?arr[1]:arr[0])
|
||||
return config
|
||||
}, error => {
|
||||
return Promise.reject(error)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,129 @@
|
|||
import OSS from "ali-oss";
|
||||
import { $getCredentials } from "@/api/oss.js";
|
||||
|
||||
const $headers = {
|
||||
"Access-Control-Allow-Origin": "*"
|
||||
};
|
||||
const $config = {
|
||||
region: "oss-cn-shanghai",
|
||||
accessKeyId: "",
|
||||
accessKeySecret: "",
|
||||
bucket: "djvideo"
|
||||
}
|
||||
import { Notification } from 'element-ui'
|
||||
function urlConversion(path) {
|
||||
let reg = /^(https?:\/\/)([0-9a-z.]+)(:[0-9]+)?([/0-9a-z.]+)?(\?[0-9a-z&=]+)?(#[0-9-a-z]+)?/i
|
||||
path = path.replace(reg, "https://$2$3$4$5$6");
|
||||
return path
|
||||
}
|
||||
|
||||
async function uploadAndDownloadFile(name, file, headers) {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
ossClient.put(name, file, { ...$headers, ...headers }).then((res) => {
|
||||
console.log(res);
|
||||
resolve(res);
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
reject(error);
|
||||
}
|
||||
});
|
||||
}
|
||||
class ossClient {
|
||||
constructor(config) {
|
||||
console.log(config)
|
||||
this.ossClient = new OSS({
|
||||
...$config, ...config, refreshSTSToken: async () => {
|
||||
// 向您搭建的STS服务获取临时访问凭证。
|
||||
const res = await $getCredentials()
|
||||
return {
|
||||
accessKeyId: res.accessKeyId, // 自己账户的accessKeyId或临时秘钥
|
||||
accessKeySecret: res.accessKeySecret, // 自己账户的accessKeySecret或临时秘钥
|
||||
stsToken: res.securityToken, // 从STS服务获取的安全令牌（SecurityToken）。
|
||||
}
|
||||
},
|
||||
// 刷新临时访问凭证的时间间隔，单位为毫秒。
|
||||
refreshSTSTokenInterval: 3600 * 1000
|
||||
});
|
||||
}
|
||||
async upload(name, file, progressCallback) {
|
||||
try {
|
||||
let options = {
|
||||
// 获取分片上传进度、断点和返回值。
|
||||
progress: progressCallback,
|
||||
headers: $headers
|
||||
}
|
||||
const {
|
||||
res: resp
|
||||
} = await this.ossClient.put(name, file, options).catch(error => {
|
||||
reject(error);
|
||||
})
|
||||
return resp.requestUrls
|
||||
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
reject(error);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 分片上传
|
||||
* @param {Object} client oss客户端
|
||||
* @param {Object} file 上传的文件
|
||||
* @param {Object} dir 上传oss的文件夹
|
||||
* @param {Object} progressCallback 分片进度回调
|
||||
*/
|
||||
async partUpload(name, file, progressCallback) {
|
||||
try {
|
||||
let options = {
|
||||
// 获取分片上传进度、断点和返回值。
|
||||
progress: progressCallback,
|
||||
|
||||
// 设置并发上传的分片数量。
|
||||
parallel: 8,
|
||||
// 设置分片大小。默认值为1 MB，最小值为100 KB。
|
||||
partSize: 100 * 1024,
|
||||
mime: file.type
|
||||
}
|
||||
const {
|
||||
res: resp
|
||||
} = await this.ossClient.multipartUpload(name ? name : file.name, file, options)
|
||||
// return resp.requestUrls
|
||||
console.log('------resp---');
|
||||
console.log(resp)
|
||||
return urlConversion( `${resp.requestUrls[0]}`.split('?')[0])
|
||||
} catch (e) {
|
||||
console.log('------e---');
|
||||
console.log(e);
|
||||
if (e.name == 'cancel') {
|
||||
Notification.error({
|
||||
title: '上传已取消',
|
||||
duration: 3000
|
||||
})
|
||||
return e
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 结束上传并删除碎片
|
||||
* @param {Object} client
|
||||
* @param {Object} uploadId
|
||||
* @param {Object} name
|
||||
*/
|
||||
async abortUpload(uploadId, name) {
|
||||
try {
|
||||
const res=await this.ossClient.abortMultipartUpload(name, uploadId)
|
||||
return res
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
return error
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
export default ossClient;
|
||||
|
|
@ -0,0 +1,107 @@
|
|||
<template>
|
||||
<el-dialog
|
||||
:title="title"
|
||||
width="500px"
|
||||
:visible.sync="dialogVisible"
|
||||
@close="diaClose"
|
||||
:close-on-click-modal="true"
|
||||
>
|
||||
<el-form :model="form" label-width="100px">
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" required>
|
||||
<el-radio-group v-model="form.type">
|
||||
<el-radio label="1">谢谢惠顾</el-radio>
|
||||
<el-radio label="2">红包</el-radio>
|
||||
<el-radio label="9">其他</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="红包金额比例" v-if="form.type=='2'">
|
||||
<el-input-number v-model="form.ratio"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="中奖概率" v-if="form.type=='2'">
|
||||
<el-input-number v-model="form.odds"></el-input-number>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片上传">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
v-model="form.url"
|
||||
:action="$http.adornUrl('alioss/upload')"
|
||||
:show-file-list="false"
|
||||
:on-success="uploadSuccess"
|
||||
>
|
||||
<div class="upload-file-box">
|
||||
<img
|
||||
v-if="form.url"
|
||||
:src="form.url"
|
||||
class="avatar"
|
||||
/>
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon iconss"></i>
|
||||
</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="diaClose">取 消</el-button>
|
||||
<el-button type="primary" @click="confirm">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $disc from "@/api/disc-spinning.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
title: "编辑转盘",
|
||||
form: {
|
||||
name: "",
|
||||
url: "",
|
||||
ratio:1,
|
||||
type:'1',
|
||||
odds:0
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
uploadSuccess(file) {
|
||||
this.form.url = file.data;
|
||||
},
|
||||
open(item) {
|
||||
this.dialogVisible = true;
|
||||
this.item = item;
|
||||
},
|
||||
diaClose() {
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
async confirm() {
|
||||
if (!this.form.name) {
|
||||
return this.$message.error("描述不能为空");
|
||||
}
|
||||
const res = await $disc.add(this.form);
|
||||
console.log(res);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.el-form-item__label {
|
||||
text-align: left;
|
||||
}
|
||||
::v-deep .el-form-item__label {
|
||||
text-align: left;
|
||||
}
|
||||
.upload-file-box{
|
||||
border-radius: 6px; width: 148px; height: 148px;
|
||||
display: flex; justify-content: center; align-items: center;
|
||||
overflow: hidden;
|
||||
border: 1px solid #c0c4cc;
|
||||
img{
|
||||
width: 100%; height: 100%; object-fit: cover;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue