修改

src/components/nfcPopup/gxmore.vue

@@ -27,7 +27,6 @@
           </div>
         </div>
       </div>
-      <input v-show="false" ref="upload"  type='file' accept="image/*"  capture="camera" @change="fileChange" @click="useCamera(1)"/>
 <!--      <input v-show="false" ref="upload"  type='file' accept="image/*" capture="camera" @change="fileChange"/>-->
     </van-popup>
   </div>
@@ -217,7 +216,7 @@ export default {
     nfcTakePhotos(){
       this.file = null;
       this.imageError = null;
-      this.$refs.upload.click();
+      this.useCamera(1);
     },
   }
 }

src/components/upload/gxuploader.vue

@@ -1,186 +1,198 @@
 <template>
-    <div>
-        <van-uploader
-          ref="uploader"
-          v-bind="$attrs"
-          v-model="fileList"
-          :before-read="beforeRead"
-          :after-read="afterRead"
-          @click-upload="useCamera(1)"
-          capture="camera"
-          :max-count="maxCount"
-          @delete="deleteHandler"
-          :max-size="maxSize * 1024*1024"/>
+  <div>
+    <div id="upload-gx" style="float: left">
+      <van-uploader
+        ref="uploader"
+        v-bind="$attrs"
+        v-model="fileList"
+        :before-read="beforeRead"
+        :after-read="afterRead"
+        :max-count="maxCount"
+        @delete="deleteHandler"
+        :show-upload="false"
+        :max-size="maxSize * 1024*1024"/>
     </div>
+    <div  class="van-uploader__upload" @click="useCamera(1)">
+      <i class="van-icon van-icon-photograph van-uploader__upload-icon">
+      </i>
+    </div>
+  </div>
 </template>
 <script>
 import {upload, uploadBase64} from "@/api/public";
 import ImageCompressor from "js-image-compressor";
 import {imgUrl} from "@/utils";
-export default {
-    props:{
-      value:{
-        type: Array,
-      },
-      //最大上传数量
-      maxCount:{
-        type: Number,
-        default: 6,
-      },
-      //文件大小，单位MB
-      maxSize:{
-        type: Number,
-        default: 5,
-      },
 
+export default {
+  props: {
+    value: {
+      type: Array,
+    },
+    //最大上传数量
+    maxCount: {
+      type: Number,
+      default: 6,
     },
-    data() {
-      return {
-        //组件显示用
-        fileList:[],
-        //上传之后的图片列表，双向绑定之后覆盖fileList
-        imageList:[]
-      };
+    //文件大小，单位MB
+    maxSize: {
+      type: Number,
+      default: 5,
     },
 
-    mounted() {
+  },
+  data() {
+    return {
+      //组件显示用
+      fileList: [],
+      //上传之后的图片列表，双向绑定之后覆盖fileList
+      imageList: []
+    };
+  },
 
-    },
-    watch:{
-      value:{
-        handler(val){
-          if(!val || val.length === 0) {
-            this.imageList = [];
-            return
-          }
-          this.fileList = val.map(v=>{
-            v.url = imgUrl(v.imgPath);
-            return v
-          })
-          this.imageList = JSON.parse(JSON.stringify(this.fileList));
-        },
-        immediate:true
-      }
-    },
-    methods: {
-      openCameraCallBack(data){
-        let img =  JSON.parse(data);
-        this.content = data;
-        let params = {
-          extension:img.extension,
-          content:img.content,
+  mounted() {
 
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (!val || val.length === 0) {
+          this.imageList = [];
+          return
         }
-        uploadBase64(params).then(res=>{
-          /*上传成功*/
-          this.$toast.success('上传成功')
-          this.imageList.push({ name: res.data.name, url: imgUrl(res.data.url),imgPath:res.data.url});
-          this.$emit('input',this.imageList)
-        }).catch((err) => {
-          /*上传失败*/
-          this.$toast.fail('上传失败')
-          this.fileList.splice(this.fileList.length-1,1);
-        });
+        this.fileList = val.map(v => {
+          v.url = imgUrl(v.imgPath);
+          return v
+        })
+        this.imageList = JSON.parse(JSON.stringify(this.fileList));
       },
-      useCamera(actionType){
-        window.openCameraCallBack = null;
-        window.openCameraCallBack = this.openCameraCallBack;
-        let parms = {};
-        if(actionType){
-          parms.actionType = actionType;
-        }
-        let system = this.isAndroidOrIos();
-        if(system === 1){
-          //android
-          // 判断当前环境是是否存在 js桥 'sap'
-          const hasSap = window.hasOwnProperty('sap');
-          if (hasSap) {
-            // 判断是否存在方法 ?preview
-            const fun = sap.hasOwnProperty('openCamera');
-            if (fun) {
-              sap.openCamera(JSON.stringify(parms));
-            }
-          }
-        }
+      immediate: true
+    }
+  },
+  methods: {
+    openCameraCallBack(data) {
+      let img = JSON.parse(data);
+      this.content = data;
+      let params = {
+        extension: img.extension,
+        content: img.content,
 
-        if(system === 2){
-          //ios
-          // 判断 ios是否存在方法 preview
-          const preview = window.webkit.messageHandlers.hasOwnProperty('openCamera')
-          if (preview) {
-            window.webkit.messageHandlers.openCamera.postMessage(JSON.stringify(parms))
+      }
+      uploadBase64(params).then(res => {
+        /*上传成功*/
+        this.$toast.success('上传成功')
+        this.imageList.push({name: res.data.name, url: imgUrl(res.data.url), imgPath: res.data.url});
+        this.$emit('input', this.imageList)
+      }).catch((err) => {
+        /*上传失败*/
+        this.$toast.fail('上传失败')
+        this.fileList.splice(this.fileList.length - 1, 1);
+      });
+    },
+    useCamera(actionType) {
+      window.openCameraCallBack = null;
+      window.openCameraCallBack = this.openCameraCallBack;
+      let parms = {};
+      if (actionType) {
+        parms.actionType = actionType;
+      }
+      let system = this.isAndroidOrIos();
+      if (system === 1) {
+        //android
+        // 判断当前环境是是否存在 js桥 'sap'
+        const hasSap = window.hasOwnProperty('sap');
+        if (hasSap) {
+          // 判断是否存在方法 ?preview
+          const fun = sap.hasOwnProperty('openCamera');
+          if (fun) {
+            sap.openCamera(JSON.stringify(parms));
           }
         }
-      },
-      isAndroidOrIos(){
-        const urls = navigator.userAgent;
-        let isAndroid = urls.indexOf('Android') > -1 || urls.indexOf('Linux') > -1;
-        let isIos = !!urls.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
-        if(isAndroid){
-          return 1;
-        }
-        if(isIos){
-          return 2;
+      }
+
+      if (system === 2) {
+        //ios
+        // 判断 ios是否存在方法 preview
+        const preview = window.webkit.messageHandlers.hasOwnProperty('openCamera')
+        if (preview) {
+          window.webkit.messageHandlers.openCamera.postMessage(JSON.stringify(parms))
         }
-      },
-      //上传前压缩
-      beforeRead(file){
-        console.log(file,'图片压缩前')
-        return new Promise((resolve, reject) => {
-            new ImageCompressor({
-              file,
-              quality: 0.6,
-              success: (result) => {
-                //this.$toast('图片压缩成功')
-                console.log(result,'图片压缩后')
-                let imgFile = new File([result], result.name, {
-                  width: result.width,
-                  height: result.height,
-                  type: result.type,
-                });
-                console.log(imgFile,'后')
-                resolve(imgFile);
-              },
-              error: (e) => {
-                console.log('imageError:'+e);
-                this.$toast('图片压缩失败')
-                reject(e);
-              },
+      }
+    },
+    isAndroidOrIos() {
+      const urls = navigator.userAgent;
+      let isAndroid = urls.indexOf('Android') > -1 || urls.indexOf('Linux') > -1;
+      let isIos = !!urls.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+      if (isAndroid) {
+        return 1;
+      }
+      if (isIos) {
+        return 2;
+      }
+    },
+    //上传前压缩
+    beforeRead(file) {
+      console.log(file, '图片压缩前')
+      return new Promise((resolve, reject) => {
+        new ImageCompressor({
+          file,
+          quality: 0.6,
+          success: (result) => {
+            //this.$toast('图片压缩成功')
+            console.log(result, '图片压缩后')
+            let imgFile = new File([result], result.name, {
+              width: result.width,
+              height: result.height,
+              type: result.type,
             });
+            console.log(imgFile, '后')
+            resolve(imgFile);
+          },
+          error: (e) => {
+            console.log('imageError:' + e);
+            this.$toast('图片压缩失败')
+            reject(e);
+          },
         });
-      },
-      //上传到服务器
-      afterRead(fileObj){
-        let formData = new FormData();
-        formData.append("file", fileObj.file);
-        upload(formData, "image").then((res) => {
-          /*上传成功*/
-          this.$toast.success('上传成功')
-          this.imageList.push({ name: res.data.name, url: imgUrl(res.data.url),imgPath:res.data.url});
-          this.$emit('input',this.imageList)
-        }).catch((err) => {
-          /*上传失败*/
-          this.$toast.fail('上传失败')
-          this.fileList.splice(this.fileList.length-1,1);
-        });
-      },
-      //删除
-      deleteHandler(){
-        let imageList=JSON.parse(JSON.stringify(this.fileList));
-        console.log(imageList,'imageList')
-        this.$emit('input',imageList)
-      }
+      });
     },
-    model:{
-      prop:'value',
-      event:'input'
+    //上传到服务器
+    afterRead(fileObj) {
+      let formData = new FormData();
+      formData.append("file", fileObj.file);
+      upload(formData, "image").then((res) => {
+        /*上传成功*/
+        this.$toast.success('上传成功')
+        this.imageList.push({name: res.data.name, url: imgUrl(res.data.url), imgPath: res.data.url});
+        this.$emit('input', this.imageList)
+      }).catch((err) => {
+        /*上传失败*/
+        this.$toast.fail('上传失败')
+        this.fileList.splice(this.fileList.length - 1, 1);
+      });
+    },
+    //删除
+    deleteHandler() {
+      let imageList = JSON.parse(JSON.stringify(this.fileList));
+      console.log(imageList, 'imageList')
+      this.$emit('input', imageList)
     }
+  },
+  model: {
+    prop: 'value',
+    event: 'input'
+  }
 };
 </script>
 <style lang="scss" scoped>
-  .upload-text{
-    font-size: 18px;
-    color: #999;
-    margin-top: 5px;
+.upload-text {
+  font-size: 18px;
+  color: #999;
+  margin-top: 5px;
+}
+#upload-gx{
+  .van-uploader{
+
   }
+
+}
 </style>