选择文件并上传。

package.json

@@ -61,6 +61,7 @@
     "sockjs-client": "1.6.1",
     "sortablejs": "^1.15.2",
     "stompjs": "^2.3.3",
+    "uuid": "^9.0.1",
     "vue": "^3.4.21",
     "vue-i18n": "9.9.1",
     "vue-pdf-embed": "^2.0.2",

src/components/Upload/CameraUpload.vue

@@ -26,6 +26,7 @@
 
 <script setup>
 import { uploadFileApi } from "@/api/file";
+import * as uuidv4 from "uuid";
 
 let mediaStreamTrack = null; // 视频对象(全局)
 let video;
@@ -80,7 +81,7 @@ function takePhoto() {
   // toDataURL  ---  可传入'image/png'---默认, 'image/jpeg'
   let base64Data = document.getElementById("canvas").toDataURL();
   let blob = dataURItoBlob(base64Data);
-  let file = new File([blob], "filename.png", { type: "image/png" });
+  let file = new File([blob], `${uuid()}.png`, { type: "image/png" });
 
   uploadFileApi(file).then((res) => {
     console.log("上传图片", res);
@@ -109,6 +110,7 @@ const selectFile = () => {
   input.click();
   input.onchange = function () {
     let file = this.files[0];
+    file.name = `${uuidv4()}${file.name.split(".")[1]}`;
     if (file) {
       uploadFileApi(file).then((res) => {
         console.log("上传图片", res);

src/views/pro-steps/components/duomeiticaiji.vue

@@ -1,7 +1,41 @@
 <template>
-  <div>src/views/555555pro-steps</div>
+  <div>
+    <!-- 物料采集 -->
+    <el-input v-model="input" placeholder="Please input" style="width: 240px" />
+    <CameraUpload @upload-finish="finish" />
+    <el-tooltip
+      class="box-item"
+      content="Right Top prompts info"
+      effect="dark"
+      placement="right-start"
+      trigger="click"
+    >
+      <div class="box-item"></div>
+    </el-tooltip>
+  </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+defineOptions({
+  name: "Wuliaocaiji",
+});
+import CameraUpload from "@/components/Upload/CameraUpload.vue";
 
-<style lang="scss" scoped></style>
+const input = ref("");
+
+const finish = (value) => {
+  console.log("采集", value);
+};
+</script>
+
+<style lang="scss" scoped>
+.simpleText {
+  font-size: $f20;
+  line-height: 20px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  max-width: 100%;
+}
+</style>