增加阿里云oss上传

config/index.js

@@ -7,7 +7,6 @@ const devEnv = require('./dev.env')
 
 module.exports = {
   dev: {
-
     // Paths
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',

package.json

@@ -13,6 +13,7 @@
     "build": "gulp"
   },
   "dependencies": {
+    "ali-oss": "^6.21.0",
     "axios": "0.17.1",
     "babel-plugin-component": "0.10.1",
     "babel-polyfill": "6.26.0",

src/api/classApi.js

@@ -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

src/api/disc-spinning.js

@@ -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
+}

src/api/oss.js

@@ -0,0 +1,8 @@
+import $http from '@/utils/httpRequest'
+export function $getCredentials(data) {
+    return $http({
+        url: 'alioss/getCredentials',
+        method: 'get',
+        params: data
+    })
+}

src/utils/httpRequest.js

@@ -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)

src/utils/oss-upload.js

@@ -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;

src/views/finance/components/pop-add-zhuanpan.vue

@@ -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>