Browse Source

头像上传

chao 3 years ago
parent
commit
5a83188213

+ 2 - 3
.env.development

@@ -1,8 +1,7 @@
 # just a flag
 ENV = 'development'
 
-# base api
-# VUE_APP_BASE_API = 'http://localhost:18015'
-
 # base api
 VUE_APP_BASE_API = 'http://192.168.2.75:18015'
+# 图片上传,索引更新等
+VUE_APP_CORE_API = 'https://core-b.caimei365.com'

+ 3 - 2
.env.production

@@ -2,5 +2,6 @@
 ENV = 'production'
 
 # base api
-VUE_APP_BASE_API = 'https://mapi.caimei365.com/'
-
+VUE_APP_BASE_API = 'https://mapi.caimei365.com'
+# 图片上传,索引更新等
+VUE_APP_CORE_API = 'https://core.caimei365.com'

+ 3 - 2
.env.staging

@@ -4,5 +4,6 @@ NODE_ENV = production
 ENV = 'staging'
 
 # base api
-VUE_APP_BASE_API = '/stage-api'
-
+VUE_APP_BASE_API = 'https://mapi-b.caimei365.com'
+# 图片上传,索引更新等
+VUE_APP_CORE_API = 'https://core-b.caimei365.com'

+ 0 - 128
src/components/Upload/SingleImage.vue

@@ -1,128 +0,0 @@
-<template>
-  <div class="upload-container">
-    <el-upload :data="dataObj" :multiple="false" :show-file-list="false" :on-success="handleImageSuccess" class="image-uploader" drag action="https://httpbin.org/post">
-      <i class="el-icon-upload" />
-      <div class="el-upload__text">
-        将文件拖到此处,或<em>点击上传</em>
-      </div>
-    </el-upload>
-    <div class="image-preview">
-      <div v-show="imageUrl.length>1" class="image-preview-wrapper">
-        <img :src="imageUrl+'?imageView2/1/w/200/h/200'">
-        <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: 'SingleImageUpload',
-  props: {
-    value: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      tempUrl: '',
-      dataObj: { token: '', key: '' }
-    }
-  },
-  computed: {
-    imageUrl() {
-      return this.value
-    }
-  },
-  methods: {
-    rmImage() {
-      this.emitInput('')
-    },
-    emitInput(val) {
-      this.$emit('input', val)
-    },
-    handleImageSuccess() {
-      this.emitInput(this.tempUrl)
-    },
-    beforeUpload() {
-      const _self = this
-      return new Promise((resolve, reject) => {
-        // eslint-disable-next-line no-undef
-        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 lang="scss" scoped>
-@import '~@/styles/mixin.scss';
-.upload-container {
-  width: 100%;
-  position: relative;
-  @include clearfix;
-  .image-uploader {
-    width: 60%;
-    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, 0.5);
-      transition: opacity 0.3s;
-      cursor: pointer;
-      text-align: center;
-      line-height: 200px;
-      .el-icon-delete {
-        font-size: 36px;
-      }
-    }
-    &:hover {
-      .image-preview-action {
-        opacity: 1;
-      }
-    }
-  }
-}
-</style>

+ 0 - 125
src/components/Upload/SingleImage2.vue

@@ -1,125 +0,0 @@
-<template>
-  <div class="singleImageUpload2 upload-container">
-    <el-upload :data="dataObj" :multiple="false" :show-file-list="false" :on-success="handleImageSuccess" class="image-uploader" drag action="https://httpbin.org/post">
-      <i class="el-icon-upload" />
-      <div class="el-upload__text">
-        Drag或<em>点击上传</em>
-      </div>
-    </el-upload>
-    <div v-show="imageUrl.length>0" class="image-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>
-</template>
-
-<script>
-// import { getToken } from '@/api/qiniu'
-
-export default {
-  name: 'SingleImageUpload2',
-  props: {
-    value: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      tempUrl: '',
-      dataObj: { token: '', key: '' }
-    }
-  },
-  computed: {
-    imageUrl() {
-      return this.value
-    }
-  },
-  methods: {
-    rmImage() {
-      this.emitInput('')
-    },
-    emitInput(val) {
-      this.$emit('input', val)
-    },
-    handleImageSuccess() {
-      this.emitInput(this.tempUrl)
-    },
-    beforeUpload() {
-      const _self = this
-      return new Promise((resolve, reject) => {
-        // eslint-disable-next-line no-undef
-        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(() => {
-            reject(false)
-          })
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.upload-container {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  .image-uploader {
-    height: 100%;
-  }
-  .image-preview {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left: 0px;
-    top: 0px;
-    border: 1px dashed #d9d9d9;
-    .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, 0.5);
-      transition: opacity 0.3s;
-      cursor: pointer;
-      text-align: center;
-      line-height: 200px;
-      .el-icon-delete {
-        font-size: 36px;
-      }
-    }
-    &:hover {
-      .image-preview-action {
-        opacity: 1;
-      }
-    }
-  }
-}
-</style>

+ 0 - 151
src/components/Upload/SingleImage3.vue

@@ -1,151 +0,0 @@
-<template>
-  <div class="upload-container">
-    <el-upload :data="dataObj" :multiple="false" :show-file-list="false" :on-success="handleImageSuccess" class="image-uploader" drag action="https://httpbin.org/post">
-      <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">
-        <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: ''
-    }
-  },
-  data() {
-    return {
-      tempUrl: '',
-      dataObj: { token: '', key: '' }
-    }
-  },
-  computed: {
-    imageUrl() {
-      return this.value
-    }
-  },
-  methods: {
-    rmImage() {
-      this.emitInput('')
-    },
-    emitInput(val) {
-      this.$emit('input', val)
-    },
-    handleImageSuccess(file) {
-      this.emitInput(file.files.file)
-    },
-    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
-            this.tempUrl = response.data.qiniu_url
-            resolve(true)
-          })
-          .catch(err => {
-            console.log(err)
-            reject(false)
-          })
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import '~@/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, 0.5);
-      transition: opacity 0.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>

+ 1 - 1
src/components/Upload/singleUpload.vue

@@ -21,7 +21,7 @@ export default {
   data() {
     return {
       dialogVisible: false,
-      uploadUrl: 'https://core-b.caimei365.com/tools/image/upload/multi'
+      uploadUrl: process.env.VUE_APP_CORE_API + '/tools/image/upload/multi'
     }
   },
   computed: {