Like the restless wind, Like the floating clouds, Life is like a float Full of acquintance and separation

package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "vue-cropper": "^0.5.6"
+  }
+}

pc/src/components/cropper.vue

@@ -1,293 +1,294 @@
 <template>
-    <div class="custom-upload">
-        <el-dialog
-                title="图片裁剪"
-                :visible.sync="showCropper"
-                width="50%"
-                height="600"
-                class="cropper-dialog"
-                center
-                append-to-body
-        >
-            <vue-cropper
-                    v-if="showCropper"
-                    id="corpper"
-                    ref="cropper"
-                    :class="{'corpper-warp':showCropper}"
-                    v-bind="cropper"
-            />
-            <div v-if="showCropper" class="cropper-button">
-                <el-button class="cancel-btn" size="small" @click.native="showCropper=false">取消</el-button>
-                <el-button size="small" type="primary" :loading="loading" @click="uploadCover">完成</el-button>
-            </div>
-        </el-dialog>
-        <input
-                :id="id"
-                type="file"
-                style="display: none"
-                name="single"
-                accept="image/*"
-                @change="onChange($event)"
-        />
+  <div class="custom-upload">
+    <el-dialog
+        title="图片裁剪"
+        :visible.sync="showCropper"
+        width="50%"
+        height="600"
+        class="cropper-dialog"
+        center
+        append-to-body
+    >
+      <vue-cropper
+          v-if="showCropper"
+          id="corpper"
+          ref="cropper"
+          :class="{'corpper-warp':showCropper}"
+          v-bind="cropper"
+      />
+      <div v-if="showCropper" class="cropper-button">
+        <el-button class="cancel-btn" size="small" @click.native="showCropper=false">取消</el-button>
+        <el-button size="small" type="primary" :loading="loading" @click="uploadCover">完成</el-button>
+      </div>
+    </el-dialog>
+    <input
+        :id="id"
+        type="file"
+        style="display: none"
+        name="single"
+        accept="image/*"
+        @change="onChange($event)"
+    />
 
-        <el-button size="small" type="primary" :loading="loading" @click="handleOpenFile()">
-            <i class="fa fa-upload"/>
-            {{ buttonName }}
-        </el-button>
-        <div v-if="tips" class="tips clear-margin-top">{{ tips }}</div>
-    </div>
+    <el-button size="small" type="primary" :loading="loading" @click="handleOpenFile()">
+      <i class="fa fa-upload"/>
+      {{ buttonName }}
+    </el-button>
+    <div v-if="tips" class="tips clear-margin-top">{{ tips }}</div>
+  </div>
 </template>
 
 <script>
-    import * as qiniu from 'qiniu-js';
-    // 上传文件组件
-    import {VueCropper} from 'vue-cropper'
+import * as qiniu from 'qiniu-js';
+// 上传文件组件
+import {VueCropper} from 'vue-cropper'
 
-    // 定义的接口根据自己项目更换
-    // import {uploadImage} from '@/api/upload'
+// 定义的接口根据自己项目更换
+// import {uploadImage} from '@/api/upload'
 
-    import {isImageFile, isMaxFileSize, readFile} from '@/utils/upload'   // 见下文
-    let qs = require('qs');
-    export default {
-        components: {
-            VueCropper
-        },
-        props: {
-            // 最大上传文件的大小
-            maxFileSize: {
-                type: Number,
-                default: 50 // （MB)
-            },
-            // 按钮文字
-            buttonName: {
-                type: String,
-                default: '添加图片'
-            },
-            // 提示内容
-            tips: {
-                type: String
-            },
-            // 图片裁剪比列
-            fixedNumber: {
-                type: Array,
-                default: function () {
-                    return []
-                }
-            },
-            // 图片文件分辨率的宽度
-            width: {
-                type: Number,
-                default: 460
-            },
-            // 图片文件分辨率的高度
-            height: {
-                type: Number,
-                default: 300
-            }
-        },
-        data() {
-            return {
-                imageUrl: '',
-                token: {},
-                // 七牛云的上传地址，根据自己所在地区选择，我这里是华南区
-                // domain: 'https://up-z1.qiniup.com',
-                // 这是七牛云空间的外链默认域名
-                // qiniuaddr: 'qjzpcd34v.hb-bkt.clouddn.com',
-                // domain: 'https://up-z1.qiniup.com', // 这是七牛云空间的外链默认域名
-                domain: 'https://up-z1.qiniup.com', // 这是七牛云空间的外链默认域名
-                qiniuaddr: 'xhead.beswell.com',//xhead.beswell.com 旧的 qjzpcd34v.hb-bkt.clouddn.com
-                id: 'cropper-input-' + +new Date(),
-                loading: false,
-                showCropper: false,
-                cropper: {
-                    img: '',
-                    info: true,
-                    size: 0.9,
-                    outputType: 'png',
-                    canScale: true,
-                    autoCrop: true,
-                    full: true,
-                    // 只有自动截图开启 宽度高度才生效
-                    autoCropWidth: this.width,
-                    autoCropHeight: this.height,
-                    fixedBox: false,
-                    // 开启宽度和高度比例
-                    fixed: true,
-                    fixedNumber: this.fixedNumber,
-                    original: false,
-                    canMoveBox: true,
-                    canMove: true,
-                    outputSize: 1, // 裁剪生成图片的质量
-                    outputType: 'png', // 裁剪生成图片的格式
-                    full: true, // 是否输出原图比例的截图
-                    info: true, // 图片大小信息
-                    canScale: true, // 图片是否允许滚轮缩放
-                    autoCrop: true, // 是否默认生成截图框
-                    autoCropWidth: 200, // 默认生成截图框宽度
-                    autoCropHeight: 150, // 默认生成截图框高度
-                    canMove: true, // 上传图片是否可以移动
-                    fixedBox: true, // 固定截图框大小 不允许改变
-                    fixed: false, // 是否开启截图框宽高固定比例
-                    canMoveBox: true, // 截图框能否拖动
-                    original: false, // 上传图片按照原始比例渲染
-                    centerBox: false, // 截图框是否被限制在图片里面
-                    height: true,
-                    infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
-                    enlarge: 1, // 图片根据截图框输出比例倍数
-                    mode: 'container', // 图片默认渲染方式
-                    maxImgSize: 375 // 限制图片最大宽度和高度
-                }
-            }
-        },
-        methods: {
-            // 打开文件
-            handleOpenFile() {
-                const input = document.getElementById(this.id)
-                // 解决同一个文件不能监听的问题
-                input.addEventListener(
-                    'click',
-                    function () {
-                        this.value = ''
-                    },
-                    false
-                )
-                // 点击input
-                input.click()
-            },
+import {isImageFile, isMaxFileSize, readFile} from '@/utils/upload'   // 见下文
+let qs = require('qs');
+export default {
+  components: {
+    VueCropper
+  },
+  props: {
+    // 最大上传文件的大小
+    maxFileSize: {
+      type: Number,
+      default: 50 // （MB)
+    },
+    // 按钮文字
+    buttonName: {
+      type: String,
+      default: '添加图片'
+    },
+    // 提示内容
+    tips: {
+      type: String
+    },
+    // 图片裁剪比列
+    fixedNumber: {
+      type: Array,
+      default: function () {
+        return []
+      }
+    },
+    // 图片文件分辨率的宽度
+    width: {
+      type: Number,
+      default: 460
+    },
+    // 图片文件分辨率的高度
+    height: {
+      type: Number,
+      default: 300
+    }
+  },
+  data() {
+    return {
+      imageUrl: '',
+      token: {},
+      // 七牛云的上传地址，根据自己所在地区选择，我这里是华南区
+      // domain: 'https://up-z1.qiniup.com',
+      // 这是七牛云空间的外链默认域名
+      // qiniuaddr: 'qjzpcd34v.hb-bkt.clouddn.com',
+      // domain: 'https://up-z1.qiniup.com', // 这是七牛云空间的外链默认域名
+      domain: 'https://up-z1.qiniup.com', // 这是七牛云空间的外链默认域名
+      qiniuaddr: 'xhead.beswell.com',//xhead.beswell.com 旧的 qjzpcd34v.hb-bkt.clouddn.com
+      id: 'cropper-input-' + +new Date(),
+      loading: false,
+      showCropper: false,
+      cropper: {
+        img: '',
+        info: true,
+        size: 0.9,
+        outputType: 'png',
+        canScale: true,
+        autoCrop: true,
+        full: true,
+        // 只有自动截图开启 宽度高度才生效
+        autoCropWidth: this.width,
+        autoCropHeight: this.height,
+        fixedBox: false,
+        // 开启宽度和高度比例
+        fixed: true,
+        fixedNumber: this.fixedNumber,
+        canMoveBox: true,
+        canMove: true,
+        outputSize: 1, // 裁剪生成图片的质量
+        outputType: 'png', // 裁剪生成图片的格式
+        full: true, // 是否输出原图比例的截图
+        info: true, // 图片大小信息
+        canScale: true, // 图片是否允许滚轮缩放
+        autoCrop: true, // 是否默认生成截图框
+        autoCropWidth: 200, // 默认生成截图框宽度
+        autoCropHeight: 150, // 默认生成截图框高度
+        canMove: true, // 上传图片是否可以移动
+        fixedBox: true, // 固定截图框大小 不允许改变
+        fixed: false, // 是否开启截图框宽高固定比例
+        canMoveBox: true, // 截图框能否拖动
+        original: false, // 上传图片按照原始比例渲染
+        centerBox: false, // 截图框是否被限制在图片里面
+        height: true,
+        infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
+        enlarge: 1, // 图片根据截图框输出比例倍数
+        mode: 'container', // 图片默认渲染方式
+        maxImgSize: 375 // 限制图片最大宽度和高度
+      }
+    }
+  },
+  methods: {
+    // 打开文件
+    handleOpenFile() {
+      const input = document.getElementById(this.id)
+      // 解决同一个文件不能监听的问题
+      input.addEventListener(
+          'click',
+          function () {
+            this.value = ''
+          },
+          false
+      )
+      // 点击input
+      input.click()
+    },
 
-            // 裁剪input 监听
-            async onChange(e) {
-                let file = e.target.files[0];
-                console.log(file);
-                if (!file) {
-                    console.log('选择图片失败');
-                    return false
-                }
-                // 验证文件类型
-                if (!isImageFile(file)) {
-                    return
-                }
-                try {
-                    // 读取文件
-                    const src = await readFile(file)
-                    this.showCropper = true
-                    this.cropper.img = src
-                } catch (error) {
-                    console.log(error)
-                }
-            },
+    // 裁剪input 监听
+    async onChange(e) {
+      let file = e.target.files[0];
+      console.log(file);
+      if (!file) {
+        console.log('选择图片失败');
+        return false
+      }
+      // 验证文件类型
+      if (!isImageFile(file)) {
+        return
+      }
+      try {
+        // 读取文件
+        const src = await readFile(file)
+        this.showCropper = true
+        this.cropper.img = src
+      } catch (error) {
+        console.log(error)
+      }
+    },
 
-            // 封面上传功能
-            uploadCover() {
-                this.$refs.cropper.getCropBlob(async imgRes => {
-                    try {
-                        // 文件大小限制
-                        if (!isMaxFileSize(imgRes, this.maxFileSize)) {
-                            return
-                        }
-                        this.loading = true
-                        const url = imgRes;
-                        // this.$emit('subUploadSucceed', url);
-                        this.loading = false
-                        this.showCropper = false
-                        // 上传图片
-                        this.upqiniu(imgRes);
-                    } catch (error) {
-                        this.loading = false
-                        this.showCropper = false
-                        console.log(error);
-                    }
-                })
-            },
-            // 上传文件到七牛云
-            upqiniu(req)
-            {
-                const config = {
-                    headers: {'Content-Type': 'multipart/form-data'}
-                };
-                let filetype = 'jpg';
-                // 重命名要上传的文件
-                const keyname = 'GoAllOut' + new Date().valueOf() + Math.floor(Math.random() * 100) + '.' + filetype;
-                // 从后端获取上传凭证token
-                let param = {
-                    token: localStorage.token,
-                };
-                let postdata = qs.stringify(param);
-                this.axios.post('/api/v1/QiNiu/GetSimpleQiNiuToken', postdata).then(res => {
-                    const formdata = new FormData();
-                    formdata.append('file', req);
-                    formdata.append('token', res.data.QiNinToken);
-                    formdata.append('key', keyname);
-                    // 获取到凭证之后再将文件上传到七牛云空间
-                    this.axios.post(this.domain, formdata, config).then(res => {
-                        this.imageUrl = 'http://' + this.qiniuaddr + '/' + res.data.key
-                        this.$emit('subUploadSucceed',  this.imageUrl)
-                    })
-                })
-            }
+    // 封面上传功能
+    uploadCover() {
+      this.$refs.cropper.getCropBlob(async imgRes => {
+        try {
+          // 文件大小限制
+          if (!isMaxFileSize(imgRes, this.maxFileSize)) {
+            return
+          }
+          this.loading = true
+          // this.$emit('subUploadSucceed', url);
+          console.log(imgRes);
+          // 上传图片
+          this.upqiniu(imgRes);
+          this.loading = false
+          this.showCropper = false
+        } catch (error) {
+          this.loading = false
+          this.showCropper = false
+          console.log(error);
         }
+      })
+    },
+    // 上传文件到七牛云
+    upqiniu(req) {
+      const config = {
+        headers: {'Content-Type': 'multipart/form-data'}
+      };
+      let filetype = 'jpg';
+      // 重命名要上传的文件
+      const keyname = 'GoAllOut' + new Date().valueOf() + Math.floor(Math.random() * 100) + '.' + filetype;
+      // 从后端获取上传凭证token
+      let param = {
+        token: localStorage.token,
+        // token: 'd6398fe970cc64475cfce4041bb327cf',
+      };
+      let postdata = qs.stringify(param);
+      // this.axios.post('http://xfeilong.iyoogo.com:85/v1/QiNiu/GetSimpleQiNiuTokenByCross', postdata).then(res => {
+      this.axios.post(headapi +'v1/QiNiu/GetSimpleQiNiuToken', postdata).then(res => {
+        const formdata = new FormData();
+        console.log(req);
+        formdata.append('file', req);
+        formdata.append('token', res.data.QiNinToken);
+        formdata.append('key', keyname);
+        // 获取到凭证之后再将文件上传到七牛云空间
+        this.axios.post(this.domain, formdata, config).then(res => {
+          this.imageUrl = 'http://' + this.qiniuaddr + '/' + res.data.key
+          this.$emit('subUploadSucceed', this.imageUrl)
+        })
+      })
     }
+  }
+}
 </script>
 
 <style scoped>
-    #corpper {
-        width: 90%;
-        height: 400px;
-        margin: 0 auto;
-        background-image: none;
-        background: #fff;
-        z-index: 1002;
-    }
+#corpper {
+  width: 90%;
+  height: 400px;
+  margin: 0 auto;
+  background-image: none;
+  background: #fff;
+  z-index: 1002;
+}
 
-    .cropper-dialog {
-        height: 800px;
-        text-align: center;
-    }
+.cropper-dialog {
+  height: 800px;
+  text-align: center;
+}
 
-    .el-dialog__header {
-        padding-top: 15px;
-    }
+.el-dialog__header {
+  padding-top: 15px;
+}
 
-    .el-dialog--center .el-dialog__body {
-        padding-top: 0;
-        padding-bottom: 15px;
-    }
+.el-dialog--center .el-dialog__body {
+  padding-top: 0;
+  padding-bottom: 15px;
+}
 
-    .el-dialog {
-        text-align: center;
-    }
+.el-dialog {
+  text-align: center;
+}
 
-    .cropper-button {
-        z-index: 1003;
-        text-align: center;
-        margin-top: 20px;
-    }
+.cropper-button {
+  z-index: 1003;
+  text-align: center;
+  margin-top: 20px;
+}
 
-    .el-button {
-        font-size: 16px;
-        cursor: pointer;
-        text-align: center;
-    }
+.el-button {
+  font-size: 16px;
+  cursor: pointer;
+  text-align: center;
+}
 
-    .cancel-btn {
-        color: #373737;
-    }
+.cancel-btn {
+  color: #373737;
+}
 
-    .el-button:last-child {
-        margin-left: 0px;
-    }
+.el-button:last-child {
+  margin-left: 0px;
+}
 
-    .cropper-modal {
-        background-color: rgba(0, 0, 0, 0.5) !important;
-    }
+.cropper-modal {
+  background-color: rgba(0, 0, 0, 0.5) !important;
+}
 
-    .custom-upload .tips {
-        margin-top: 10px;
-        color: red;
-        font-size: 12px;
-    }
+.custom-upload .tips {
+  margin-top: 10px;
+  color: red;
+  font-size: 12px;
+}
 
-    .custom-upload.clear-margin-top {
-        margin-top: 0;
-    }
+.custom-upload.clear-margin-top {
+  margin-top: 0;
+}
 </style>

pc/src/views/Member.vue

@@ -289,15 +289,15 @@
                             </el-select>
                         </el-form-item>
                         <el-form-item label="头像" :required="true">
-                            <div class="upload">
-                                <el-upload
-                                        class="avatar-uploader"
-                                        :action=domain
-                                        :http-request=upqiniu
-                                        :show-file-list="false"
-                                        :before-upload="beforeUpload">
-                                    <!--<i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
-                                </el-upload>
+<!--                            <div class="upload">-->
+<!--                                <el-upload-->
+<!--                                        class="avatar-uploader"-->
+<!--                                        :action=domain-->
+<!--                                        :http-request=upqiniu-->
+<!--                                        :show-file-list="false"-->
+<!--                                        :before-upload="beforeUpload">-->
+<!--                                    &lt;!&ndash;<i v-else class="el-icon-plus avatar-uploader-icon"></i>&ndash;&gt;-->
+<!--                                </el-upload>-->
                                 <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                 <cropper
                                         :width="300"
@@ -306,7 +306,7 @@
                                         @subUploadSucceed="getShopImages"
                                 ></cropper>
                                 <!--<ImgCutter v-on:cutDown="cutDown"></ImgCutter>-->
-                            </div>
+<!--                            </div>-->
                         </el-form-item>
                         <el-form-item label="出生年份" :required="true">
                             <el-date-picker