1.修改图片上传公共接口。2.多媒体采集。

.env.development

@@ -7,11 +7,14 @@ VITE_APP_PORT = 3005
 # 代理前缀
 VITE_APP_BASE_API = '/dev-api'
 
+# 上传文件接口地址
+VITE_APP_UPLOAD_URL = 'http://192.168.101.4:9000'
+
 # 线上接口地址
 # VITE_APP_API_URL = http://vapi.youlai.tech
 # 开发接口地址
- VITE_APP_API_URL = 'http://192.168.101.4:8078'
-#VITE_APP_API_URL = 'http://192.168.101.51:8078'
+ VITE_APP_API_URL = 'http://192.168.101.4:8079'
 
+``
 # 是否启用 Mock 服务
 VITE_MOCK_DEV_SERVER = false

package.json

@@ -43,6 +43,7 @@
     "@element-plus/icons-vue": "^2.3.1",
     "@smallwei/avue": "^3.3.3",
     "@types/smallwei__avue": "^3.0.5",
+    "@types/uuid": "^9.0.8",
     "@vueuse/core": "^10.9.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "5.1.10",

src/api/file/index.ts

@@ -1,6 +1,7 @@
 import request from "@/utils/request";
 import { AxiosPromise } from "axios";
 import { FileInfo } from "./types";
+import { v4 as uuidv4 } from "uuid";
 
 /**
  * 上传文件
@@ -10,7 +11,9 @@ import { FileInfo } from "./types";
 export function uploadFileApi(file: File): AxiosPromise<FileInfo> {
   const formData = new FormData();
   formData.append("file", file);
-  console.log("dddd", file);
+
+  formData.append("fileName", `${uuidv4()}.` + file.name.split(".").pop());
+
   return request({
     url: "/api/v1/base/upload",
     method: "post",

src/api/process/medias.ts

@@ -0,0 +1,32 @@
+import request from "@/utils/request";
+
+// 新增多媒体信息
+export function addMedia(data: { filePath: string; operationMediaId: string }) {
+  return request({
+    url: "/api/v1/process/media/add",
+    method: "post",
+    data: data,
+  });
+}
+
+//批量删除多媒体信息
+export function deleteMedias(ids: string[]) {
+  return request({
+    url: "/api/v1/process/media/batch-del",
+    method: "post",
+    data: { ids },
+  });
+}
+
+//分页查询
+export function pageMedias(proId: string) {
+  return request({
+    url: "/api/v1/process/media/page",
+    method: "post",
+    data: {
+      operationMediaId: proId,
+      pageNum: 1,
+      pageSize: 200,
+    },
+  });
+}

src/components/Upload/CameraUpload.vue

@@ -1,7 +1,18 @@
 <template>
   <div class="camera-upload">
-    <svg-icon icon-class="paizhao" size="80" @click="openMedia" />
-    <svg-icon icon-class="bendishangchuan" size="80" @click="selectFile" />
+    <div class="row">
+      <svg-icon icon-class="paizhao" size="80" @click="openMedia" />
+      <svg-icon icon-class="bendishangchuan" size="80" @click="selectFile" />
+    </div>
+    <div class="row">
+      <svg-icon icon-class="paizhao" size="80" @click="clickReset" />
+      <svg-icon
+        icon-class="bendishangchuan"
+        size="80"
+        @click="clickDeleteAll"
+      />
+    </div>
+
     <input v-show="false" id="fileInput" accept="image/*" type="file" />
   </div>
 
@@ -26,12 +37,11 @@
 
 <script setup>
 import { uploadFileApi } from "@/api/file";
-import * as uuidv4 from "uuid";
 
 let mediaStreamTrack = null; // 视频对象(全局)
 let video;
 
-const cameraEmit = defineEmits(["uploadFinish"]);
+const cameraEmit = defineEmits(["uploadFinish", "resetSelect", "deleteAll"]);
 
 const openMedia = async () => {
   visible.value = true;
@@ -81,7 +91,7 @@ function takePhoto() {
   // toDataURL  ---  可传入'image/png'---默认, 'image/jpeg'
   let base64Data = document.getElementById("canvas").toDataURL();
   let blob = dataURItoBlob(base64Data);
-  let file = new File([blob], `${uuid()}.png`, { type: "image/png" });
+  let file = new File([blob], `photo.png`, { type: "image/png" });
 
   uploadFileApi(file).then((res) => {
     console.log("上传图片", res);
@@ -110,20 +120,28 @@ const selectFile = () => {
   input.click();
   input.onchange = function () {
     let file = this.files[0];
-    file.name = `${uuidv4()}${file.name.split(".")[1]}`;
+    console.log(file);
     if (file) {
       uploadFileApi(file).then((res) => {
-        console.log("上传图片", res);
-        cameraEmit("uploadFinish", res);
+        cameraEmit("uploadFinish", res.data);
       });
     }
   };
 };
+
+const clickReset = () => {
+  cameraEmit("resetSelect");
+};
+
+const clickDeleteAll = () => {
+  cameraEmit("deleteAll");
+};
 </script>
 
 <style lang="scss" scoped>
 .camera-upload {
   display: flex;
+  flex-direction: column;
   justify-content: space-evenly;
   align-items: center;
   width: 292px;
@@ -131,6 +149,13 @@ const selectFile = () => {
   border-radius: 16px 16px 16px 16px;
   border: 2px dashed rgba(0, 0, 0, 0.2);
 
+  .row {
+    width: 100%;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+  }
+
   .icon-back:nth-child(1) {
     margin-right: 58px;
   }

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

@@ -1,41 +1,130 @@
 <template>
-  <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>
+  <el-scrollbar style="width: 100%; height: 100%">
+    <div class="media-container">
+      <CameraUpload
+        @reset-select="clickReset"
+        @upload-finish="finish"
+        @delete-all="clickDeleteAll"
+      />
+      <div
+        v-for="(item, index) in medias.filter((item: any) => item.filePath)"
+        :key="index"
+        class="media-item"
+      >
+        <img :src="getImgurl(item)" alt="" class="img-box" object-fit="cover" />
+        <svg-icon
+          v-if="item.isSelected"
+          class="check"
+          icon-class="bendishangchuan"
+          size="30"
+          @click="item.isSelected = false"
+        />
+        <svg-icon
+          v-else
+          class="check"
+          icon-class="edit"
+          size="30"
+          @click="item.isSelected = true"
+        />
+      </div>
+    </div>
+  </el-scrollbar>
 </template>
 
 <script lang="ts" setup>
+import { useProcessStore } from "@/store";
+import { addMedia, deleteMedias, pageMedias } from "@/api/process/medias";
+
+import CameraUpload from "@/components/Upload/CameraUpload.vue";
+
+const proStore = useProcessStore();
+const medias = ref<any>([]);
+
 defineOptions({
   name: "Wuliaocaiji",
 });
-import CameraUpload from "@/components/Upload/CameraUpload.vue";
 
 const input = ref("");
 
-const finish = (value) => {
-  console.log("采集", value);
+const finish = (value: string) => {
+  addMedia({
+    filePath: value,
+    operationMediaId: proStore.odersData.operationId,
+  }).then((res) => {
+    getListData();
+  });
+};
+
+onMounted(() => {
+  getListData();
+});
+
+const getListData = () => {
+  pageMedias(proStore.odersData.operationId).then((res) => {
+    medias.value = res.data.records || [];
+  });
+};
+
+const getImgurl = (item: any) => {
+  let url = import.meta.env.VITE_APP_UPLOAD_URL + item.filePath;
+  return url;
+};
+
+const clickReset = () => {
+  medias.value.forEach((item: any) => {
+    item.isSelected = false;
+  });
+};
+
+const clickDeleteAll = () => {
+  let ids = medias.value
+    .filter((item: any) => item.isSelected)
+    .map((item: any) => item.id);
+
+  ids &&
+    ids.length > 0 &&
+    deleteMedias(ids).then(() => {
+      getListData();
+    });
 };
 </script>
 
 <style lang="scss" scoped>
-.simpleText {
-  font-size: $f20;
-  line-height: 20px;
-  white-space: nowrap;
+.media-container {
+  width: 100%;
+  display: grid;
+  /*行间距*/
+  //grid-row-gap: 24px;
+  /*列间距*/
+  //grid-column-gap: 24px;
+  /*每3行有2个行间距，所以每个格子的宽高都要减去(24*2) / 3 */
+  //grid-template-columns: repeat(4, calc(33.33% - 16px));
+  //grid-template-rows: repeat(4, calc(33.33% - 16px));
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  overflow-y: auto;
+}
+
+.media-item {
+  width: 292px;
+  height: 292px;
+  flex-shrink: 0;
+  margin-bottom: 49px;
+  border: 1px solid #ccc;
+  border-radius: 16px 16px 16px 16px;
   overflow: hidden;
-  text-overflow: ellipsis;
-  cursor: pointer;
-  max-width: 100%;
+  position: relative;
+
+  .img-box {
+    width: 292px;
+    height: 292px;
+  }
+
+  .check {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    width: 48px;
+    height: 48px;
+  }
 }
 </style>