nfc弹窗组件对接上传接口

src/components/nfcPopup/alone.vue

@@ -27,6 +27,8 @@
 
 <script>
 import {baseImg} from "@/views/menu/LZRegister/api";
+import {upload} from "@/api/public";
+import ImageCompressor from "js-image-compressor";
 export default {
   name: "index",
   data(){
@@ -48,16 +50,46 @@ export default {
     }
   },
   methods:{
-    fileChange(e){
-      console.log(e.target.files[0],'file')
+    //上传前
+    async fileChange(e){
       let file = e.target.files[0];
       let fileName = e.target.files[0].name;
-      console.log(file,fileName,'file')
-      setTimeout(()=>{
+      let imgFile = await this.imageCompress(file);
+      console.log(imgFile,'imgFile')
+      let formData = new FormData();
+      formData.append('file',imgFile);
+      upload(formData,'image').then(res=>{
+        console.log(res,'resssss')
         this.nfcImage = baseImg.base;
         this.$emit('change',baseImg)
         this.showBottomBox = false;
-      },1000)
+      })
+
+    },
+    //压缩图片
+    imageCompress(file){
+      let imageCom = new Promise((resolve,reject)=>{
+        new ImageCompressor({
+          file,
+          quality: 0.6,
+          success: (result) => {
+            //this.$toast('图片压缩成功')
+            console.log(result,'图片压缩后')
+            let img = new File([result], result.name, {
+              width: result.width,
+              height: result.height,
+              type: result.type,
+            });
+            resolve(img);
+          },
+          error: (e) => {
+            console.log('imageError:'+e);
+            this.$toast('图片压缩失败')
+            reject(e);
+          },
+        });
+      });
+      return imageCom;
     },
     nfcTakePhotos(){
       this.$refs.upload.click();

src/components/nfcPopup/more.vue

@@ -20,13 +20,14 @@
         </div>
       </div>
       <input v-show="false" ref="upload" type='file' accept="image/*" @change="fileChange"/>
-      <!--    <uploader v-show="false" ref="imageUpload" v-model="nfcImage" multiple :maxCount="1" :deletable="false"/>-->
     </van-popup>
   </div>
 </template>
 
 <script>
 import {baseImg} from "@/views/menu/LZRegister/api";
+import {upload} from "@/api/public";
+import ImageCompressor from "js-image-compressor";
 export default {
   name: "index",
   data(){
@@ -48,17 +49,48 @@ export default {
     }
   },
   methods:{
-    fileChange(e){
-      console.log(e.target.files[0],'file')
+    //上传前
+    async fileChange(e){
       let file = e.target.files[0];
       let fileName = e.target.files[0].name;
-      console.log(file,fileName,'file')
-      setTimeout(()=>{
+      let imgFile = await this.imageCompress(file);
+      console.log(imgFile,'imgFile')
+      let formData = new FormData();
+      formData.append('file',imgFile);
+      upload(formData,'image').then(res=>{
+        console.log(res,'resssss')
         this.nfcImage = baseImg.base;
         this.$emit('change',baseImg)
         this.showBottomBox = false;
-      },1000)
+      })
+
+    },
+    //压缩图片
+    imageCompress(file){
+      let imageCom = new Promise((resolve,reject)=>{
+        new ImageCompressor({
+          file,
+          quality: 0.6,
+          success: (result) => {
+            //this.$toast('图片压缩成功')
+            console.log(result,'图片压缩后')
+            let img = new File([result], result.name, {
+              width: result.width,
+              height: result.height,
+              type: result.type,
+            });
+            resolve(img);
+          },
+          error: (e) => {
+            console.log('imageError:'+e);
+            this.$toast('图片压缩失败')
+            reject(e);
+          },
+        });
+      });
+      return imageCom;
     },
+    //拍照
     nfcTakePhotos(){
       this.$refs.upload.click();
     },

src/components/upload/index.vue

@@ -88,17 +88,12 @@ export default {
              });
         });
       },
-      chooseFiles(){
-        console.log( this.$refs.uploader,'子组件1111')
-        this.$refs.uploader.chooseFile({sourceType: ['album']})
-      },
       //上传到服务器
       afterRead(fileObj){
-
         console.log(fileObj,'flie');
         let formData = new FormData();
         formData.append("file", fileObj.file);
-        
+
         upload(formData, "image").then((res) => {
           console.log( config,'222')
           /*上传成功*/