图片上传新增 调用原生相机

src/components/app-mob-picture/app-mob-picture.less

@@ -10,4 +10,21 @@
 }
 .van-uploader__upload {
     margin: 8px 8px 8px 0;
+}
+.mobupload{
+    background: rgb(247, 248, 250);
+    width: 80px;
+    height: 80px;
+    margin: 8px 8px 8px 0px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    img{
+        width: 100%;
+        height: 100%;
+    }
+}
+.mob_upload_box{
+    display: flex;
 }
\ No newline at end of file

src/components/app-mob-picture/app-mob-picture.vue

 <template>
     <div class="app-mobile-picture">
         <van-uploader 
+            v-if="platform =='web'"
             :class="singleChoiceBtnState"
-            multiple="false" 
+            :multiple="multiple" 
             :disabled="state" 
             :fileList="files" 
             :result-type="resultType" 
@@ -10,6 +11,15 @@
             :after-read="afterRead"  
             @delete="onDelete"
             />
+            <div class="mob_upload_box" v-if="platform !='web'">
+                <div class="mobupload" v-for="file in files" :key="file.id">
+                    <img   :src="file.name" alt="">
+                    <i class="van-icon van-icon-clear van-uploader__preview-delete" @click="onDelete(file)"><!----></i>
+                </div>
+                <div class="mobupload" @click="takePicture" >
+                    <i class="van-icon van-icon-photograph van-uploader__upload-icon"></i>
+                </div>
+            </div>
     </div>
 </template>
 
@@ -18,9 +28,10 @@ import { Vue, Component, Prop, Provide, Emit, Watch } from 'vue-property-decorat
 import { Environment } from '@/environments/environment';
 import { Subject, Unsubscribable } from 'rxjs';
 import Axios from 'axios';
-
+import { Plugins, CameraResultType,Capacitor } from '@capacitor/core';
+const { Camera } = Plugins;
 import { Uploader } from 'vant';
-import { Loading } from '@/ibiz-core/utils';
+import { Loading ,Util} from '@/ibiz-core/utils';
 Vue.use(Uploader);
 @Component({
     components: {
@@ -28,6 +39,11 @@ Vue.use(Uploader);
 })
 export default class AppMobPicture extends Vue {
 
+    /**
+     * 当前设备信息
+     */
+    public platform :any;
+
     // MOB LOGIC BEGIN
     /**
      * 单选按钮状态
@@ -86,6 +102,7 @@ export default class AppMobPicture extends Vue {
      * @memberof AppMobPicture
      */
     public onDelete(file: any, detail: any): void {
+        console.log(this.files,file);
         this.onRemove({ id: file.id, name: file.name }, this.files);
     }
 
@@ -342,6 +359,7 @@ export default class AppMobPicture extends Vue {
      * @memberof AppMobPicture
      */
     public created() {
+        this.platform = Capacitor.getPlatform();
         if (this.formState) {
             this.formStateEvent = this.formState.subscribe(($event: any) => {
                 // 表单加载完成
@@ -495,6 +513,7 @@ export default class AppMobPicture extends Vue {
                 arr.push({ name: f.name, id: f.id });
             }
         });
+        console.log(arr);
         let value: any = arr.length > 0 ? JSON.stringify(arr) : null;
         this.$emit('formitemvaluechange', { name: this.name, value: value });
     }
@@ -543,6 +562,27 @@ export default class AppMobPicture extends Vue {
         this.dialogImageUrl = file.url;
         this.dialogVisible = true;
     }
+
+    /**
+     * 原生相机上传事件
+     * 
+     * @memberof AppMobPicture
+     */
+    public async takePicture() {
+        const image = await Camera.getPhoto({
+            quality: 90,
+            allowEditing: true,
+            resultType: CameraResultType.Uri
+        });
+        this.files.push({
+            id: Util.createUUID(),
+            name:image.webPath,
+            url:image.webPath,
+            isImage:true,
+        });
+        let base = image.base64String;
+        this.$emit('formitemvaluechange', { name: this.name, value: this.files });
+    }
 }
 </script>