添加明星图像上传

api/face_star.py

+#! /usr/bin/env python
+# -*- coding: utf-8 -*-
+# __author__ = "chenwei"
+# Date: 2018/12/11
+
+from utils.base import APIView
+
+
+class FaceStarEdit(APIView):
+    def post(self, request):
+        name = request.POST.get('name')
+        sex = request.POST.get('sex')
+        ordinary_image_url = request.POST.get('ordinary_image_url')
+        modeling_obj_url = request.POST.get('modeling_obj_url')
+
+
+        try:
+            self.rpc['mercury/face/create_star'](
+                name=name,
+                sex=sex,
+                ordinary_image_url=ordinary_image_url,
+                modeling_obj_url=modeling_obj_url
+            ).unwrap()
+        except Exception as e:
+            raise e
+        return {
+            'message': '创建成功'
+        }

api/upload.py

@@ -2,9 +2,11 @@
 # -*- coding: utf-8 -*-
 # __author__ = "chenwei"
 # Date: 2018/11/19
-
+import time
 from utils.base import APIView
-from gm_upload import upload
+from gm_upload import upload, upload_file
+
+FACE_IMAGE_TYPE = '-99'
 
 
 class FileUpload(APIView):
@@ -19,7 +21,12 @@ class FileUpload(APIView):
         image_type = self.args_post.get('uploadType')
         image = request.FILES.get('file')
         data = image.read()
-        full_image_url = upload(data, img_type=int(image_type)) + '-w'
+
+        if image_type == FACE_IMAGE_TYPE:
+            types = str(image).split('.')[-1]
+            full_image_url, _ = upload_file(data, 'face/' + str(int(time.time())) + '.' + types)
+        else:
+            full_image_url = upload(data, img_type=int(image_type)) + '-w'
         return {
             'file_url': full_image_url
         }

api/urls.py

@@ -17,6 +17,7 @@ from .search import *
 from .tag import *
 from .upload import *
 from .token import *
+from .face_star import *
 
 urlpatterns = [
     # 登陆,注销相关
@@ -85,6 +86,8 @@ urlpatterns = [
     url(r'^tag/list/update$', TagListView.as_view()),
     url(r'^tag/create$', TagUpdateOrCreateView.as_view()),
     url(r'^tag/detail$', TagUpdateOrCreateView.as_view()),
+
+    url(r'^face/star/create', FaceStarEdit.as_view()),
 ]
 
 search_urlpatterns = [

sun/settings.py

@@ -137,8 +137,10 @@ STATICFILES_DIRS = [
 #  图片上传
 QINIU_ACCESS_KEY = "UPCOYIJkZOMcdd9FDzpBqYjzWUh55fBpVi3AhWpL"
 QINIU_SECRET_KEY = "z5YvpDDSam_JE345Z8J_f3TufzelOW2VOGNoBl9e"
-QINIU_HOST = "http://wanmeizhensuo.qiniudn.com/"
-QINIU_SCOPE = 'wanmeizhensuo'
+GM_UPLOAD_ENV = "alpha"
+
+QINIU_WATERMARK_BUCKET = 'alpha'
+QINIU_FACE_BUCKET = 'alpha-s'
 
 # 超级管理员
 USERNAME = 'admin'

vu/src/api/face_image_upload.js

+import request from '@/utils/request'
+
+export function faceStarCreate(data) {
+  return request({
+    url: '/api/face/star/create',
+    method: 'post',
+    data
+  })
+}

vu/src/components/Upload/faceupload.vue

+<template>
+  <div class="upload-container">
+    <el-upload
+      :data="dataObj"
+      :multiple="false"
+      :show-file-list="false"
+      :on-success="handleImageSuccess"
+      class="image-uploader"
+      drag
+      :before-upload="handleBeforeUpload"
+      action="/api/file/upload">
+      <i class="el-icon-upload"/>
+      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+    </el-upload>
+    <!--<div class="image-preview image-app-preview">-->
+      <!--<div v-show="imageUrl.length>1" class="image-preview-wrapper">-->
+        <!--<img :src="imageUrl">-->
+        <!--<div class="image-preview-action">-->
+          <!--<i class="el-icon-delete" @click="rmImage"/>-->
+        <!--</div>-->
+      <!--</div>-->
+    <!--</div>-->
+    <div class="image-preview">
+      <div v-show="imageUrl.length>1" class="image-preview-wrapper">
+        <img :src="imageUrl" :disabled="true">
+        <div class="image-preview-action">
+          <i class="el-icon-delete" @click="rmImage"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getToken } from '@/api/qiniu'
+
+export default {
+  name: 'SingleImageUpload3',
+  props: {
+    value: {
+      type: String,
+      default: ''
+    },
+    uploadType: {
+      type: Number,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      tempUrl: '',
+      dataObj: { uploadType: this.uploadType }
+    }
+  },
+  computed: {
+    imageUrl() {
+      return this.value
+    }
+  },
+  methods: {
+    rmImage() {
+      this.emitInput('')
+    },
+    emitInput(val) {
+      this.$emit('input', val)
+    },
+    handleImageSuccess(file) {
+      this.emitInput(file.data.file_url)
+    },
+    handleBeforeUpload() {
+      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
+          this.tempUrl = response.data.qiniu_url
+          resolve(true)
+        }).catch(err => {
+          console.log(err)
+          reject(false)
+        })
+      })
+    }
+  }
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import "src/styles/mixin.scss";
+.upload-container {
+  width: 100%;
+  position: relative;
+  @include clearfix;
+  .image-uploader {
+    width: 35%;
+    float: left;
+  }
+  .image-preview {
+    width: 200px;
+    height: 200px;
+    position: relative;
+    border: 1px dashed #d9d9d9;
+    float: left;
+    margin-left: 50px;
+    .image-preview-wrapper {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .image-preview-action {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      cursor: default;
+      text-align: center;
+      color: #fff;
+      opacity: 0;
+      font-size: 20px;
+      background-color: rgba(0, 0, 0, .5);
+      transition: opacity .3s;
+      cursor: pointer;
+      text-align: center;
+      line-height: 200px;
+      .el-icon-delete {
+        font-size: 36px;
+      }
+    }
+    &:hover {
+      .image-preview-action {
+        opacity: 1;
+      }
+    }
+  }
+  .image-app-preview {
+    width: 320px;
+    height: 180px;
+    position: relative;
+    border: 1px dashed #d9d9d9;
+    float: left;
+    margin-left: 50px;
+    .app-fake-conver {
+      height: 44px;
+      position: absolute;
+      width: 100%; // background: rgba(0, 0, 0, .1);
+      text-align: center;
+      line-height: 64px;
+      color: #fff;
+    }
+  }
+}
+</style>

vu/src/components/Upload/singleImage3.vue

@@ -7,7 +7,7 @@
       :on-success="handleImageSuccess"
       class="image-uploader"
       drag
-      accept="image/png,image/gif,image/jpg,image/jpeg"
+      accept="image/png,image/gif,image/jpg,image/jpeg,*/*"
       :before-upload="handleBeforeUpload"
       action="/api/file/upload">
       <i class="el-icon-upload"/>

vu/src/router/index.js

@@ -81,5 +81,5 @@ export const asyncRouterMap = [
   PushRouter,
   PickRouter,
   TagRouter,
-  { path: '*', redirect: '/404', hidden: true }
+  { path: '*', redirect: '/404', hidden: true },
 ]

vu/src/router/modules/star.js

@@ -31,7 +31,14 @@ const StarRouter = {
       name: 'EditStar',
       meta: {title: '编辑明星', noCache: true},
       hidden: true
-    }
+    },
+    {
+      path: 'face/create',
+      component: () => import('@/views/face/create'),
+      name: 'CreateFaceStar',
+      meta: {title: 'Face明星', icon: 'edit'},
+      hidden: true
+    },
   ]
 }
 

vu/src/views/face/components/UserDetail.vue

+<template>
+  <div class="createPost-container">
+    <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
+
+      <sticky :class-name="'sub-navbar '+postForm.status">
+        <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm" :disabled="isdisabledFn">保存
+        </el-button>
+      </sticky>
+
+      <div class="createPost-main-container">
+        <el-row :gutter="20">
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <span>Face明星</span>
+            </div>
+
+            <el-row>
+              <el-col :span="24">
+                <div class="postInfo-container">
+                  <el-row>
+                    <el-col :span="12">
+
+                      <el-form-item style="margin-bottom: 20px;" label-width="75px" label="*用户名:" prop="nick_name">
+                        <el-input v-model="postForm.name" type="text" style="width: 230px"/>
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+
+                      <el-form-item label-width="75px" label="*性别:" prop="gender">
+                        <el-select v-model="postForm.sex" :placeholder="'性别:'" clearable
+                                   class="postInfo-container-item"
+                                   style="width: 230px">
+                          <el-option v-for="item in GenderTypeOptions" :key="item.key" :label="item.display_name"
+                                     :value="item.key"/>
+                        </el-select>
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+
+                </div>
+              </el-col>
+            </el-row>
+
+            <div>
+              <el-form-item style="margin-bottom: 20px;" label-width="75px" label="*头像一:" prop="avatar">
+                <span v-model="uploadType"></span>
+                <FaceUpload v-model="postForm.ordinary_image_url" :uploadType="uploadType"/>
+              </el-form-item>
+            </div>
+
+            <div>
+              <el-form-item style="margin-bottom: 20px;" label-width="75px" label="*头像二:" prop="avatar">
+                <span v-model="uploadType"></span>
+                <FaceUpload v-model="postForm.modeling_obj_url" :uploadType="uploadType"/>
+              </el-form-item>
+            </div>
+          </el-card>
+        </el-row>
+      </div>
+    </el-form>
+
+  </div>
+</template>
+
+<script>
+  import Tinymce from '@/components/Tinymce'
+  import FaceUpload from '@/components/Upload/faceupload'
+  import MDinput from '@/components/MDinput'
+  import Sticky from '@/components/Sticky' // 粘性header组件
+  import waves from '@/directive/waves'
+  import Pagination from '@/components/Pagination'
+  import {validateURL} from '@/utils/validate'
+  import {faceStarCreate} from '@/api/face_image_upload'
+
+
+  const defaultForm = {
+    status: 'draft',
+    uploadType: '',
+
+    name: '',
+    sex: '',
+    ordinary_image_url: '',
+    modeling_obj_url: '',
+  }
+
+  export default {
+    name: 'FaceStarDetail',
+    components: {Tinymce, MDinput, FaceUpload, Sticky, Pagination},
+    directives: {waves},
+    props: {
+      isEdit: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      const validateRequire = (rule, value, callback) => {
+        if (value === '') {
+          this.$message({
+            message: rule.field + '为必传项',
+            type: 'error'
+          })
+          callback(new Error(rule.field + '为必传项'))
+        } else {
+          callback()
+        }
+      }
+      return {
+        postForm: Object.assign({}, defaultForm),
+        loading: false,
+
+        city: '',
+        tags: [],
+
+        rules: {
+          name: [{validator: validateRequire, trigger: 'blur'}],
+          sex: [{validator: validateRequire, trigger: 'blur'}],
+        },
+        tempRoute: {},
+        GenderTypeOptions: [
+          {'key': 0, 'display_name': '男'},
+          {'key': 1, 'display_name': '女'},
+        ],
+        uploadType: -99,
+        isdisabledFn: false
+      }
+    },
+    computed: {
+      lang() {
+        return this.$store.getters.language
+      }
+    },
+    created() {
+    },
+    methods: {
+      submitForm() {
+
+        this.$refs.postForm.validate(valid => {
+          if (valid) {
+            this.loading = true
+            if (this.postForm.ordinary_image_url === ''){
+              this.$message.error('头像一不能为空~')
+              this.loading = false
+              return false
+            }
+            if (this.postForm.modeling_obj_url === ''){
+              this.$message.error('头像二不能为空~')
+              this.loading = false
+              return false
+            }
+            this.isdisabledFn = true
+            faceStarCreate(this.postForm).then(response => {
+              this.$notify({
+                title: '成功',
+                message: response.data.data.message,
+                type: 'success',
+                duration: 2000
+              })
+              this.$router.go(0)
+            }).catch(err => {
+              this.$notify({
+                title: '失败',
+                message: '操作失败',
+                type: 'danger',
+                duration: 2000
+              })
+            });
+
+
+            this.postForm.status = 'published'
+            this.loading = false
+          } else {
+            console.log('error submit!!')
+            return false
+          }
+        })
+      },
+      getRemoteCityList(query) {
+        citySearch(query).then(response => {
+          if (!response.data.data.data) return
+          this.regionListOptions = response.data.data.data
+        })
+      },
+      getRemoteTagList(query) {
+        tagSearch(query).then(response => {
+          if (!response.data.data.data) return
+          this.tagListOptions = response.data.data.data
+        })
+      },
+    }
+  }
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+  @import "src/styles/mixin.scss";
+
+  .createPost-container {
+    position: relative;
+    .createPost-main-container {
+      padding: 40px 45px 20px 50px;
+      .postInfo-container {
+        position: relative;
+        @include clearfix;
+        margin-bottom: 10px;
+        .postInfo-container-item {
+          float: left;
+        }
+      }
+      .editor-container {
+        min-height: 500px;
+        margin: 0 0 30px;
+        .editor-upload-btn-container {
+          text-align: right;
+          margin-right: 10px;
+          .editor-upload-btn {
+            display: inline-block;
+          }
+        }
+      }
+    }
+    .word-counter {
+      width: 40px;
+      position: absolute;
+      right: -10px;
+      top: 0px;
+    }
+  }
+</style>

vu/src/views/face/create.vue

+<template>
+  <user-detail :is-edit="false"/>
+</template>
+
+<script>
+import UserDetail from './components/UserDetail'
+
+export default {
+  name: 'CreateUser',
+  components: { UserDetail }
+}
+</script>
+

vu/src/views/face/edit.vue

+<template>
+  <user-detail :is-edit="true"/>
+</template>
+
+<script>
+import UserDetail from './components/UserDetail'
+
+export default {
+  name: 'EditUser',
+  components: { UserDetail }
+}
+</script>
+

vu/src/views/topic/components/TopicDetail.vue

@@ -136,7 +136,7 @@
                 <div class="name">
                   <span style="color: #606266;text-align:center;font-size:14px;padding:0 12px 0 0;">帖子视频</span>
                 </div>
-                <div class="value" style="margin-left: 50px">
+                <div class="value" style="margin-left: 50px">q
                   <div class="up-video">
                     <ul class="video-items clearfix" v-if="edit.video_url">
                       <li class="video-item" @click.stop="playVideo">