upload avatar

src/views/account/settings/AvatarModal.vue

@@ -1,10 +1,12 @@
 <template>
+
   <a-modal
     title="修改头像"
     :visible="visible"
     :maskClosable="false"
     :confirmLoading="confirmLoading"
     :width="800"
+    :footer="null"
     @cancel="cancelHandel">
     <a-row>
       <a-col :xs="24" :md="12" :style="{height: '350px'}">
@@ -26,30 +28,49 @@
         </div>
       </a-col>
     </a-row>
-
-    <template slot="footer">
-      <a-button key="back" @click="cancelHandel">取消</a-button>
-      <a-button key="submit" type="primary" :loading="confirmLoading" @click="okHandel">保存</a-button>
-    </template>
+    <br>
+    <a-row>
+      <a-col :lg="2" :md="2">
+        <a-upload name="file" :beforeUpload="beforeUpload" :showUploadList="false">
+          <a-button icon="upload">选择图片</a-button>
+        </a-upload>
+      </a-col>
+      <a-col :lg="{span: 1, offset: 2}" :md="2">
+        <a-button icon="plus" @click="changeScale(1)"/>
+      </a-col>
+      <a-col :lg="{span: 1, offset: 1}" :md="2">
+        <a-button icon="minus" @click="changeScale(-1)"/>
+      </a-col>
+      <a-col :lg="{span: 1, offset: 1}" :md="2">
+        <a-button icon="undo" @click="rotateLeft"/>
+      </a-col>
+      <a-col :lg="{span: 1, offset: 1}" :md="2">
+        <a-button icon="redo" @click="rotateRight"/>
+      </a-col>
+      <a-col :lg="{span: 2, offset: 6}" :md="2">
+        <a-button type="primary" @click="finish('blob')">保存</a-button>
+      </a-col>
+    </a-row>
   </a-modal>
+
 </template>
 <script>
-// import { VueCropper } from 'vue-cropper'
+import { VueCropper } from 'vue-cropper'
 
 export default {
-  /*
   components: {
     VueCropper
   },
-  */
   data () {
     return {
       visible: false,
       id: null,
       confirmLoading: false,
-
+      fileList: [],
+      uploading: false,
       options: {
-        img: '/avatar2.jpg',
+        // img: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+        img: '',
         autoCrop: true,
         autoCropWidth: 200,
         autoCropHeight: 200,
@@ -71,6 +92,65 @@ export default {
     cancelHandel () {
       this.close()
     },
+    changeScale (num) {
+      num = num || 1
+      this.$refs.cropper.changeScale(num)
+    },
+    rotateLeft () {
+      this.$refs.cropper.rotateLeft()
+    },
+    rotateRight () {
+      this.$refs.cropper.rotateRight()
+    },
+    beforeUpload (file) {
+      const reader = new FileReader()
+      // 把Array Buffer转化为blob 如果是base64不需要
+      // 转化为base64
+      reader.readAsDataURL(file)
+      reader.onload = () => {
+        this.options.img = reader.result
+      }
+      // 转化为blob
+      // reader.readAsArrayBuffer(file)
+
+      return false
+    },
+
+    // 上传图片（点击上传按钮）
+    finish (type) {
+      console.log('finish')
+      const _this = this
+      const formData = new FormData()
+      // 输出
+      if (type === 'blob') {
+        this.$refs.cropper.getCropBlob((data) => {
+          const img = window.URL.createObjectURL(data)
+          this.model = true
+          this.modelSrc = img
+          formData.append('file', data, this.fileName)
+          this.$http.post('https://www.mocky.io/v2/5cc8019d300000980a055e76', formData, { contentType: false, processData: false, headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
+            .then((response) => {
+              console.log("upload response:",response)
+              // var res = response.data
+              // if (response.status === 'done') {
+              //   _this.imgFile = ''
+              //   _this.headImg = res.realPathList[0] // 完整路径
+              //   _this.uploadImgRelaPath = res.relaPathList[0] // 非完整路径
+              //   _this.$message.success('上传成功')
+              //   this.visible = false
+              // }
+              _this.$message.success('上传成功')
+              _this.$emit('ok', response.url)
+              _this.visible = false
+            })
+        })
+      } else {
+        this.$refs.cropper.getCropData((data) => {
+          this.model = true
+          this.modelSrc = data
+        })
+      }
+    },
     okHandel () {
       const vm = this
 

src/views/account/settings/BaseSetting.vue

@@ -63,9 +63,8 @@
 
     </a-row>
 
-    <avatar-modal ref="modal">
+    <avatar-modal ref="modal" @ok="setavatar"/>
 
-    </avatar-modal>
   </div>
 </template>
 
@@ -98,7 +97,9 @@ export default {
     }
   },
   methods: {
-
+    setavatar (url) {
+      this.option.img = url
+    }
   }
 }
 </script>