文件上传组件封装

config.js

@@ -1,15 +1,14 @@
-let APP_SERVER_URL = ""
-
-if(process.env.NODE_ENV === 'development'){
-    // 开发环境
-    APP_SERVER_URL = '/api'
-}else{
-    // 生产环境
-    //APP_SERVER_URL = 'http://cloud.jeeplus.org/api'
-    //APP_SERVER_URL = 'http://192.168.2.131/api'
-    APP_SERVER_URL = 'http://cpaoa.xgccpm.com/api'
+let APP_SERVER_URL = "";
+if (process.env.NODE_ENV === "development") {
+  // 开发环境
+  APP_SERVER_URL = "/api";
+} else {
+  // 生产环境
+  //APP_SERVER_URL = 'http://cloud.jeeplus.org/api'
+  //APP_SERVER_URL = 'http://192.168.2.131/api'
+  APP_SERVER_URL = "http://cpaoa.xgccpm.com/api";
 }
 
-APP_SERVER_URL = APP_SERVER_URL
+APP_SERVER_URL = APP_SERVER_URL;
 
-export default APP_SERVER_URL
+export default APP_SERVER_URL;

pages/common/UploadComponent.vue

@@ -122,6 +122,14 @@ export default {
             this.videoUrl = ""
             this.videoShow = false
         },
+
+        handleDeleteFile(index) {
+            console.log();
+
+            const deletedFile = this.fileList[index]; // 获取被删除的文件
+            // this.fileList.splice(index, 1); // 删除文件
+            this.$emit("onRemove", deletedFile, this.fileList, index); // 传递剩余文件列表和被删除的文件
+        },
         // 预览
         handlePreview(row) {
             const fileType = this.getFileType(row.name);
@@ -133,7 +141,6 @@ export default {
                         current: data,
                         urls: [data],
                     });
-
                 }
                 if (fileType == "video") {
                     this.videoUrl = data
@@ -155,12 +162,18 @@ export default {
 
 
         },
-        handleDeleteFile(index) {
-            console.log();
 
-            const deletedFile = this.fileList[index]; // 获取被删除的文件
-            // this.fileList.splice(index, 1); // 删除文件
-            this.$emit("onRemove", deletedFile, this.fileList, index); // 传递剩余文件列表和被删除的文件
+        handleUploadClick() {
+            if (this.fileList.length >= this.limit) {
+                uni.showModal({
+                    title: '提示',
+                    content: `只能上传不超过${this.limit}个文件`,
+                    showCancel: false,
+                });
+                return
+            }
+            this.uploadShow = true
+            this.uploadType = 'type'
         },
         getFileType(fileName = '') {
             const flieArr = fileName.split('.');
@@ -177,18 +190,6 @@ export default {
             if (office.includes(suffix)) return 'file';
             return 'unknown';
         },
-        handleUploadClick() {
-            if (this.fileList.length >= this.limit) {
-                uni.showModal({
-                    title: '提示',
-                    content: `只能上传不超过${this.limit}个文件`,
-                    showCancel: false,
-                });
-                return
-            }
-            this.uploadShow = true
-            this.uploadType = 'type'
-        },
         handleChangeUploadType(index) {
             if (index.name == "视频上传") {
                 this.$refs.XeUpload.upload('video', {});

pages/cw/invoice/InvoiceFormTask.vue

@@ -327,8 +327,7 @@
                         <el-button type="text" icon="el-icon-close" @click="handleDelete(file)">✕</el-button>
                     </template>
                 </el-upload> -->
-                <UploadComponent
-                    :uploadUrl="`http://cpaoa.xgccpm.com/api/public-modules-server/oss/file/webUpload/upload`"
+                <UploadComponent :uploadUrl="`${uploadUrl}/public-modules-server/oss/file/webUpload/upload`"
                     @onRemove="handleDelete" @onSuccess="handleUploadSuccess"
                     :fileList="inputForm.workAttachmentDtoList" :limit="3">
                 </UploadComponent>
@@ -658,8 +657,7 @@
                         <el-button type="text" icon="el-icon-close" @click="handleDelete(file)">✕</el-button>
                     </template>
                 </el-upload> -->
-                <UploadComponent
-                    :uploadUrl="`http://cpaoa.xgccpm.com/api/public-modules-server/oss/file/webUpload/upload`"
+                <UploadComponent :uploadUrl="`${uploadUrl}/public-modules-server/oss/file/webUpload/upload`"
                     @onRemove="handleDelete" @onSuccess="handleUploadSuccess"
                     :fileList="inputForm.workAttachmentDtoList" :limit="3">
                 </UploadComponent>
@@ -686,6 +684,7 @@ import WareHouseService from '@/api/materialManagement/WareHouseService'
 import CommonApi from '@/api/common/CommonApi'
 import { mapState, mapMutations, mapActions } from 'vuex'
 import UploadComponent from '@/pages/common/UploadComponent.vue';
+import upload from '@/utils/upload.js'
 export default {
     components: {
         EmailForm,
@@ -700,6 +699,7 @@ export default {
     }),
     data() {
         return {
+            uploadUrl: upload.UPLOAD_URL,
             nodeFlag: false,
             isPreInvoice: '',
             yesNoFlag: [{ name: '否', value: '0' }, { name: '是', value: '1' }],

pages/cw/reimbursementApproval/info/ReimbursementForm.vue

@@ -413,8 +413,7 @@
                     </template>
 </el-upload> -->
                 <!-- 新版上传 -->
-                <UploadComponent
-                    :uploadUrl="`http://cpaoa.xgccpm.com/api/public-modules-server/oss/file/disposeXmlFileApp`"
+                <UploadComponent :uploadUrl="`${uploadUrl}/public-modules-server/oss/file/disposeXmlFileApp`"
                     @onRemove="(file, fileList, fileIndex) => handleDelete(file, fileList, '电子', fileIndex)"
                     @onSuccess="(file, fileList) => handleUploadSuccess(file, fileList, '电子')"
                     :fileList="inputForm.invoiceReimbursementFiles" :limit="3" :isDelete="testFlag"
@@ -439,8 +438,7 @@
                 <!-- <button @click="handleUploadClick">上传123</button>
                 <xe-upload ref="XeUpload" :options="uploadOptions" @callback="handleUploadCallback"></xe-upload> -->
                 <!-- 新版上传 -->
-                <UploadComponent
-                    :uploadUrl="'http://cpaoa.xgccpm.com/api/public-modules-server/oss/file/webUpload/upload'"
+                <UploadComponent :uploadUrl="`${uploadUrl}/public-modules-server/oss/file/webUpload/upload`"
                     @onRemove="(file, fileList, fileIndex) => handleDelete(file, fileList, '', fileIndex)"
                     @onSuccess="(file, fileList) => handleUploadSuccess(file, fileList, '')" :limit="3"
                     :isDelete="testFlag" :isUpload="testFlag" :fileList="inputForm.files">
@@ -467,7 +465,7 @@ import ReimbursementApprovalTypeService from '@/api/cw/reimbursementApproval/Rei
 import CommonApi from '@/api/common/CommonApi'
 import { mapState, mapMutations, mapActions } from 'vuex'
 import UploadComponent from '@/pages/common/UploadComponent.vue';
-
+import upload from '@/utils/upload.js'
 export default {
     components: {
         userSelect,
@@ -482,6 +480,7 @@ export default {
     }),
     data() {
         return {
+            uploadUrl: upload.UPLOAD_URL,
             uploadDelFlag: false, //控制数电发票 文件重复上传
             showFileList: [], // 控制每个文件是否显示的数组
             showFileList2: [], // 控制每个文件是否显示的数组
@@ -550,6 +549,8 @@ export default {
     ReimbursementApprovalTypeService: null,
     // 页面加载时执行
     created() {
+        console.log(this.uploadUrl);
+
         this.ossService = new OSSService()
         this.commonApi = new CommonApi()
         this.reimbursementApprovalTypeService = new ReimbursementApprovalTypeService()

pages/dailyOfficeWork/holiday/HolidayForm.vue

@@ -61,8 +61,7 @@
 						<el-button type="text" icon="el-icon-close" @click="handleDelete(file)">✕</el-button>
 					</template>
 </el-upload> -->
-				<UploadComponent
-					:uploadUrl="'http://cpaoa.xgccpm.com/api/public-modules-server/oss/file/webUpload/upload'"
+				<UploadComponent :uploadUrl="`${uploadUrl}/public-modules-server/oss/file/webUpload/upload`"
 					@onRemove="(file, fileList, fileIndex) => handleDelete(file, fileList, fileIndex)"
 					@onSuccess="(file, fileList) => handleUploadSuccess(file, fileList)" :limit="3" :isDelete="nodeFlag"
 					:isUpload="nodeFlag" :fileList="inputForm.files">
@@ -131,8 +130,7 @@
 					</template>
 				</el-upload> -->
 
-				<UploadComponent
-					:uploadUrl="'http://cpaoa.xgccpm.com/api/public-modules-server/oss/file/webUpload/upload'"
+				<UploadComponent :uploadUrl="`${uploadUrl}/public-modules-server/oss/file/webUpload/upload`"
 					@onRemove="(file, fileList, fileIndex) => handleDelete(file, fileList, fileIndex)"
 					@onSuccess="(file, fileList) => handleUploadSuccess(file, fileList)" :limit="3" :isDelete="nodeFlag"
 					:isUpload="nodeFlag" :fileList="inputForm.files">
@@ -148,6 +146,7 @@ import holidayService from '@/api/dailyOfficeWork/HolidayService'
 import CommonApi from '@/api/common/CommonApi'
 import { mapState, mapMutations, mapActions } from 'vuex'
 import UploadComponent from '@/pages/common/UploadComponent.vue';
+import upload from '@/utils/upload.js'
 export default {
 	components: {
 		UploadComponent
@@ -158,6 +157,7 @@ export default {
 	}),
 	data() {
 		return {
+			uploadUrl: upload.UPLOAD_URL,
 			showFileList: [], // 控制每个文件是否显示的数组
 			testFlag: false,
 			nodeFlag: false,

pages/materialManagement/collect/CollectForm.vue

@@ -93,8 +93,7 @@
                             </template>
 </el-upload> -->
                         <!-- 新版上传 -->
-                        <UploadComponent
-                            :uploadUrl="`http://cpaoa.xgccpm.com/api/public-modules-server/oss/file/webUpload/upload`"
+                        <UploadComponent :uploadUrl="`${uploadUrl}/public-modules-server/oss/file/webUpload/upload`"
                             @onRemove="(file, fileList, fileIndex) => handleRemove(file, fileList, index_experience, 'detail', fileIndex)"
                             @onSuccess="(file, fileList) => handleUploadSuccess(file, fileList, index_experience, 'detail')"
                             :fileList="inputForm.detailInfos[index_experience].fileInfoLost" :limit="3"
@@ -127,8 +126,7 @@
                         <el-button type="text" icon="el-icon-close" @click="handleDelete(file)">✕</el-button>
                     </template>
                 </el-upload> -->
-                <UploadComponent
-                    :uploadUrl="`http://cpaoa.xgccpm.com/api/public-modules-server/oss/file/webUpload/upload`"
+                <UploadComponent :uploadUrl="`${uploadUrl}/public-modules-server/oss/file/webUpload/upload`"
                     @onRemove="(file, fileList, fileIndex) => handleRemove(file, fileList, '', '', fileIndex)"
                     @onSuccess="(file, fileList) => handleUploadSuccess(file, fileList, '', '')"
                     :fileList="inputForm.files" :limit="3" :isDelete="nodeFlag" :isUpload="nodeFlag">
@@ -226,8 +224,7 @@
                             </template>
                         </el-upload> -->
 
-                        <UploadComponent
-                            :uploadUrl="`http://cpaoa.xgccpm.com/api/public-modules-server/oss/file/webUpload/upload`"
+                        <UploadComponent :uploadUrl="`${uploadUrl}/public-modules-server/oss/file/webUpload/upload`"
                             @onRemove="(file, fileList, fileIndex) => handleRemove(file, fileList, index_experience, 'detail', fileIndex)"
                             @onSuccess="(file, fileList) => handleUploadSuccess(file, fileList, index_experience, 'detail')"
                             :fileList="inputForm.detailInfos[index_experience].fileInfoLost" :limit="3"
@@ -262,8 +259,7 @@
                     </template>
                 </el-upload> -->
 
-                <UploadComponent
-                    :uploadUrl="`http://cpaoa.xgccpm.com/api/public-modules-server/oss/file/webUpload/upload`"
+                <UploadComponent :uploadUrl="`${uploadUrl}/public-modules-server/oss/file/webUpload/upload`"
                     @onRemove="(file, fileList, fileIndex) => handleRemove(file, fileList, '', '', fileIndex)"
                     @onSuccess="(file, fileList) => handleUploadSuccess(file, fileList, '', '')"
                     :fileList="inputForm.files" :limit="3" :isDelete="nodeFlag" :isUpload="nodeFlag">
@@ -288,6 +284,7 @@ import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue"
 import { mapState, mapMutations, mapActions } from 'vuex'
 import registerService from '@/api/human/register/RegisterService'
 import UploadComponent from '@/pages/common/UploadComponent.vue';
+import upload from '@/utils/upload.js'
 export default {
     components: {
         baTreePicker,
@@ -300,6 +297,7 @@ export default {
     }),
     data() {
         return {
+            uploadUrl: upload.UPLOAD_URL,
             showFileList: [], // 控制每个文件是否显示的数组
             showFileList2: [], // 控制每个文件是否显示的数组
             testFlag: false,

pages/materialManagement/purchase/PurchaseForm.vue

@@ -117,8 +117,7 @@
                             </template>
 </el-upload> -->
 
-                        <UploadComponent
-                            :uploadUrl="`http://cpaoa.xgccpm.com/api/public-modules-server/oss/file/webUpload/upload`"
+                        <UploadComponent :uploadUrl="`${uploadUrl}/public-modules-server/oss/file/webUpload/upload`"
                             @onRemove="(file, fileList, fileIndex) => handleRemove(file, fileList, index_experience, fileIndex, 'detail')"
                             @onSuccess="(file, fileList) => handleUploadSuccess(file, fileList, index_experience, 'detail')"
                             :fileList="inputForm.detailInfos[index_experience].fileInfoLost" :limit="3"
@@ -153,8 +152,7 @@
                 </el-upload> -->
 
 
-                <UploadComponent
-                    :uploadUrl="`http://cpaoa.xgccpm.com/api/public-modules-server/oss/file/webUpload/upload`"
+                <UploadComponent :uploadUrl="`${uploadUrl}/public-modules-server/oss/file/webUpload/upload`"
                     @onRemove="(file, fileList, fileIndex) => handleRemove(file, fileList, fileIndex, '')"
                     @onSuccess="(file, fileList) => handleUploadSuccess(file, fileList, '', '')"
                     :fileList="inputForm.files" :limit="3" :isDelete="nodeFlag" :isUpload="nodeFlag">
@@ -276,8 +274,7 @@
                                     @click="handleDelete(file, index_experience, 'detail')">✕</el-button>
                             </template>
                         </el-upload> -->
-                        <UploadComponent
-                            :uploadUrl="`http://cpaoa.xgccpm.com/api/public-modules-server/oss/file/webUpload/upload`"
+                        <UploadComponent :uploadUrl="`${uploadUrl}/public-modules-server/oss/file/webUpload/upload`"
                             @onRemove="(file, fileList, fileIndex) => handleRemove(file, fileList, index_experience, fileIndex, 'detail')"
                             @onSuccess="(file, fileList) => handleUploadSuccess(file, fileList, index_experience, 'detail')"
                             :fileList="inputForm.detailInfos[index_experience].fileInfoLost" :limit="3"
@@ -312,8 +309,7 @@
                     </template>
                 </el-upload> -->
 
-                <UploadComponent
-                    :uploadUrl="`http://cpaoa.xgccpm.com/api/public-modules-server/oss/file/webUpload/upload`"
+                <UploadComponent :uploadUrl="`${uploadUrl}/public-modules-server/oss/file/webUpload/upload`"
                     @onRemove="(file, fileList, fileIndex) => handleRemove(file, fileList, '', fileIndex, '')"
                     @onSuccess="(file, fileList) => handleUploadSuccess(file, fileList, '', '')"
                     :fileList="inputForm.files" :limit="3" :isDelete="nodeFlag" :isUpload="nodeFlag">
@@ -343,6 +339,7 @@ import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue"
 import { mapState, mapMutations, mapActions } from 'vuex'
 import registerService from '@/api/human/register/RegisterService'
 import UploadComponent from '@/pages/common/UploadComponent.vue';
+import upload from '@/utils/upload.js'
 export default {
     components: {
         userSelect,
@@ -358,6 +355,7 @@ export default {
     }),
     data() {
         return {
+            uploadUrl: upload.UPLOAD_URL,
             showFileList: [], // 控制每个文件是否显示的数组
             showFileList2: [], // 控制每个文件是否显示的数组
             testFlag: false,

utils/upload.js

@@ -0,0 +1,11 @@
+// 上传地址
+let UPLOAD_URL = "";
+if (process.env.NODE_ENV === "development") {
+  UPLOAD_URL = "http://127.0.0.1:8000/api";
+} else {
+  UPLOAD_URL = "http://cpaoa.xgccpm.com/api";
+}
+
+export default {
+  UPLOAD_URL,
+};