Przeglądaj źródła

选择图片并上传。

jiaxiaoqiang 1 rok temu
rodzic
commit
6365520a0a
2 zmienionych plików z 18 dodań i 2 usunięć
  1. 17 1
      src/components/Upload/CameraUpload.vue
  2. 1 1
      src/router/index.ts

+ 17 - 1
src/components/Upload/CameraUpload.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="camera-upload">
     <svg-icon icon-class="paizhao" size="80" @click="openMedia" />
-    <svg-icon icon-class="bendishangchuan" size="80" />
+    <svg-icon icon-class="bendishangchuan" size="80" @click="selectFile" />
+    <input v-show="false" id="fileInput" accept="image/*" type="file" />
   </div>
 
   <el-dialog
@@ -25,6 +26,7 @@
 
 <script setup>
 import { uploadFileApi } from "@/api/file";
+
 let mediaStreamTrack = null; // 视频对象(全局)
 let video;
 
@@ -101,6 +103,20 @@ function closeMedia() {
 }
 
 const visible = ref(false);
+
+const selectFile = () => {
+  let input = document.getElementById("fileInput");
+  input.click();
+  input.onchange = function () {
+    let file = this.files[0];
+    if (file) {
+      uploadFileApi(file).then((res) => {
+        console.log("上传图片", res);
+        cameraEmit("uploadFinish", res);
+      });
+    }
+  };
+};
 </script>
 
 <style lang="scss" scoped>

+ 1 - 1
src/router/index.ts

@@ -96,7 +96,7 @@ export const constantRoutes: RouteRecordRaw[] = [
           {
             path: "jiluxiang",
             component: () =>
-              import("@/views/pro-steps/components/jiluxiang.vue"),
+              import("@/views/pro-steps/components/Jiluxiang.vue"),
             name: "Jiluxiang",
             meta: {
               back: true,