上传文件改为前端直传

package.json

@@ -21,6 +21,8 @@
 		"axios": "0.18.1",
 		"ckeditor-vue": "^1.0.1",
 		"core-js": "3.6.5",
+		"cos-js-sdk-v5": "^1.5.0",
+		"cos-nodejs-sdk-v5": "^2.12.6",
 		"echarts": "^5.4.3",
 		"element-ui": "2.13.2",
 		"js-cookie": "2.2.0",

src/api/fileInfo.js

@@ -1,23 +1,23 @@
-import request from '@/utils/request'
+// import request from '@/utils/request'
 
-export function getFileList(linkId) {
-	const query = '?linkId=' + linkId
+// export function getFileList(linkId) {
+// 	const query = '?linkId=' + linkId
 
-	return request({
-		url: '/mhotel/uploadgetByLinkId.action' + query,
-		method: 'get'
-	})
-}
+// 	return request({
+// 		url: '/mhotel/uploadgetByLinkId.action' + query,
+// 		method: 'get'
+// 	})
+// }
 
-export function uploadhimage(forData) {
-	const data = new FormData()
-	data.append('myFileFileName', forData.file.name)
-	data.append('files', forData.file)
+// export function uploadhimage(forData) {
+// 	const data = new FormData()
+// 	data.append('myFileFileName', forData.file.name)
+// 	data.append('files', forData.file)
 
-	return request({
-		// url: '/mhotel/loadhimage.action', 
-		url: '/file/cos/upload', 
-		method: 'post',
-		data
-	})
-}
+// 	return request({
+// 		// url: '/mhotel/loadhimage.action', 
+// 		url: '/file/cos/upload', 
+// 		method: 'post',
+// 		data
+// 	})
+// }

src/api/perimeterMgr.js

@@ -82,19 +82,19 @@ export function appinsertArounds(forData) {
 	})
 }
 
-// 上传文件
-export function uploadFiles(file) {
-	let data = new FormData()
-	if (typeof file !== 'undefined') {
-		data.append('files', file)
-	}
+// // 上传文件
+// export function uploadFiles(file) {
+// 	let data = new FormData()
+// 	if (typeof file !== 'undefined') {
+// 		data.append('files', file)
+// 	}
 	
-	return request({
-		url: '/file/cos/upload',
-		method: 'post',
-		data
-	})
-}
+// 	return request({
+// 		url: '/file/cos/upload',
+// 		method: 'post',
+// 		data
+// 	})
+// }
 
 // 修改周边
 export function appupdateArounds(forData) {

src/components/pl-upload/index.vue

@@ -15,10 +15,12 @@
 	</div>
 </template>
 <script>
-	import {
-		getFileList,
-		uploadhimage
-	} from '@/api/fileInfo'
+	// import {
+	// 	getFileList,
+	// 	uploadhimage
+	// } from '@/api/fileInfo'
+	
+	import COS from 'cos-js-sdk-v5'
 
 	export default {
 		name: 'PlUpload',
@@ -55,7 +57,14 @@
 				hideUpload: '',
 				fileList: [],
 				uploadFileList: [],
-				defFilterTypes: '.jpg, .jpeg, .png' // 默认上传类型
+				defFilterTypes: '.jpg, .jpeg, .png', // 默认上传类型
+				cosVal: {
+					SecretId: "AKIDCPVZdcWIxgHpy5FYxVyPiqkZGrhdXUBg",
+					SecretKey: "NkyCN3cz97qKaeXLvHOGxOcdS8f184pL",
+					SecurityToken: "1306339220",
+					Bucket: "wanzai-1306339220",
+					Region: "ap-shanghai",
+				}
 			}
 		},
 		watch: {
@@ -142,7 +151,7 @@
 					this.hideUpload = this.fileList.length >= this.limitCount
 				}, 1000)
 			},
-			uploadFile(file) {
+			uploadFile(files) {
 				const self = this
 				const loading = this.$loading({
 					lock: true,
@@ -151,28 +160,65 @@
 					background: 'rgba(0, 0, 0, 0.7)'
 				})
 				// 发起上传
-				uploadhimage(file).then((res) => {
-					// console.log('uploadImagesFiles', res.data)
-					// 由于后端上传图片接口返回的数据结构发生变化，需要做一下处理
-					var objData = {}
-					objData.id = ''
-					objData.linkId = ''
-					objData.name = ''
-					objData.url = res.data
-					
-					self.uploadFileList.push(objData)
-					self.fileList = self.uploadFileList
-					setTimeout(() => {
-						// console.log("附件信息",self.fileList)
-						self.refreshUploadFile()
-						loading.close()
-					}, 1000)
-				}).catch((err) => {
-					self.fileList.splice(self.fileList.length - 1, 1)
-					console.log(err)
-					loading.close()
-					this.$message.error('上传失败')
-				})
+				const file = files.file;
+				const key = `/uploads/minsu/${new Date().getTime()}`; // 设置上传到 COS 后的文件名
+				const cos = new COS(self.cosVal);
+				cos.putObject({
+						Bucket: "wanzai-1306339220",
+						Region: "ap-shanghai",
+						Key: key,
+						Body: file,
+					},
+					function(err, data) {
+						if (err) {
+							// console.error(err);
+							self.$message.error(err);
+							self.fileList.splice(self.fileList.length - 1, 1)
+							console.log(err)
+							loading.close()
+							self.$message.error('上传失败')
+							return;
+						} else {
+							// console.log(data);
+							// 由于后端上传图片接口返回的数据结构发生变化，需要做一下处理
+							var objData = {}
+							objData.id = ''
+							objData.linkId = ''
+							objData.name = ''
+							objData.url = `https://${data.Location}`
+							
+							self.uploadFileList.push(objData)
+							self.fileList = self.uploadFileList
+							setTimeout(() => {
+								// console.log("附件信息",self.fileList)
+								self.refreshUploadFile()
+								loading.close()
+							}, 1000)
+						}
+					}
+				);
+				// uploadhimage(file).then((res) => {
+				// 	// console.log('uploadImagesFiles', res.data)
+				// 	// 由于后端上传图片接口返回的数据结构发生变化，需要做一下处理
+				// 	var objData = {}
+				// 	objData.id = ''
+				// 	objData.linkId = ''
+				// 	objData.name = ''
+				// 	objData.url = res.data
+
+				// 	self.uploadFileList.push(objData)
+				// 	self.fileList = self.uploadFileList
+				// 	setTimeout(() => {
+				// 		// console.log("附件信息",self.fileList)
+				// 		self.refreshUploadFile()
+				// 		loading.close()
+				// 	}, 1000)
+				// }).catch((err) => {
+				// 	self.fileList.splice(self.fileList.length - 1, 1)
+				// 	console.log(err)
+				// 	loading.close()
+				// 	this.$message.error('上传失败')
+				// })
 			},
 			uploadSuccess(file) {
 				this.$message.success('上传成功')

src/views/perimeterMgr/index.vue

@@ -324,7 +324,7 @@
 										</el-carousel-item>
 									</el-carousel>
 								</viewer>
-								<el-button  @click="openImageDetailUploadDialog_modify"
+								<el-button @click="openImageDetailUploadDialog_modify"
 									style="margin-top: 8px; width: 150px; border: none; background: rgba(9, 101, 98, 1); color: #fff; border-radius: 5px;"
 									size="small">上传详情图片</el-button>
 								<input type="file" ref="modifyImageDetailUploadInput" style="display:none" accept=".jpg,.png"
@@ -519,12 +519,16 @@
 	} from '@/api/perimeterMgr'
 
 	import {
-		isEmpty
+		isEmpty,
+		cos
 	} from '@/js/common'
+
 	import {
 		valid
 	} from 'mockjs'
-
+	
+	import COS from 'cos-js-sdk-v5'
+	
 	var townOptions = [] // 民宿列表
 	var townOptions_obj = [] // 民宿列表
 	export default {
@@ -691,36 +695,36 @@
 				rtypeOptions: [{
 					rtypeId: 0,
 					rtype: '民宿'
-				},{
+				}, {
 					rtypeId: 1,
 					rtype: '美食'
 				}, {
 					rtypeId: 2,
 					rtype: '景点'
-				// }, {
-				// 	rtypeId: 3,
-				// 	rtype: '停车场'
-				// }, {
-				// 	rtypeId: 4,
-				// 	rtype: '洗浴'
-				// }, {
-				// 	rtypeId: 5,
-				// 	rtype: '健身'
-				// }, {
-				// 	rtypeId: 6,
-				// 	rtype: 'KTV'
-				// }, {
-				// 	rtypeId: 7,
-				// 	rtype: '电影院'
-				// }, {
-				// 	rtypeId: 8,
-				// 	rtype: '酒吧'
+					// }, {
+					// 	rtypeId: 3,
+					// 	rtype: '停车场'
+					// }, {
+					// 	rtypeId: 4,
+					// 	rtype: '洗浴'
+					// }, {
+					// 	rtypeId: 5,
+					// 	rtype: '健身'
+					// }, {
+					// 	rtypeId: 6,
+					// 	rtype: 'KTV'
+					// }, {
+					// 	rtypeId: 7,
+					// 	rtype: '电影院'
+					// }, {
+					// 	rtypeId: 8,
+					// 	rtype: '酒吧'
 				}, {
 					rtypeId: 9,
 					rtype: '加油站'
-				// }, {
-				// 	rtypeId: 10,
-				// 	rtype: '其它'
+					// }, {
+					// 	rtypeId: 10,
+					// 	rtype: '其它'
 				}],
 				// 查询数据
 				formInline: {
@@ -908,7 +912,14 @@
 				dialogDeleteVisible: false, // 删除确认对话框
 				dialogAddProductVisible: false, // 添加产品对话框
 				dialogModifyProductVisible: false, // 编辑产品对话框
-				delPerimeterId: ''
+				delPerimeterId: '',
+				cosVal: {
+					SecretId: "AKIDCPVZdcWIxgHpy5FYxVyPiqkZGrhdXUBg",
+					SecretKey: "NkyCN3cz97qKaeXLvHOGxOcdS8f184pL",
+					SecurityToken: "1306339220",
+					Bucket: "wanzai-1306339220",
+					Region: "ap-shanghai",
+				}
 			}
 		},
 		created() {
@@ -1148,23 +1159,20 @@
 			// 周边新增上传文件
 			uploadImageVideo(event, imgOrVideo) {
 				const file = event.target.files[0];
+
+				const key = `/uploads/zhoubian/${new Date().getTime()}`; // 设置上传到 COS 后的文件名
 				var that = this
-				// 调用接口上传文件的逻辑
-				uploadFiles(file).then((res) => {
-					// console.log(res);
-					if (res.code === 1) {
-						if (!isEmpty(res.data)) {
-							if (imgOrVideo == 'img') {
-								that.$set(that.formAddDialog, 'first_img', res.data)
-							} else if (imgOrVideo == 'imgDetail') {
-								that.detail_img_array.push(res.data)
-								that.$set(that.formAddDialog, 'detail_img', that.detail_img_array)
-							} else {
-								that.videoOptions.sources[0].src = res.data
-								that.$set(that.formAddDialog, 'show_video', that.videoOptions)
-								that.$set(that.formAddDialog, 'post_video', res.data)
-							}
-						} else {
+				const cos = new COS(this.cosVal);
+				cos.putObject({
+						Bucket: "wanzai-1306339220",
+						Region: "ap-shanghai",
+						Key: key,
+						Body: file,
+					},
+					function(err, data) {
+						if (err) {
+							// console.error(err);
+							that.$message.error(err);
 							if (imgOrVideo == 'img') {
 								that.$set(that.formAddDialog, 'first_img', '')
 							} else if (imgOrVideo == 'imgDetail') {
@@ -1172,41 +1180,50 @@
 							} else {
 								that.$set(that.formAddDialog, 'show_video', '')
 							}
-						}
-					} else {
-						if (imgOrVideo == 'img') {
-							that.$set(that.formAddDialog, 'first_img', '')
-						} else if (imgOrVideo == 'imgDetail') {
-							that.$set(that.formAddDialog, 'detail_img', '')
+							return;
 						} else {
-							that.$set(that.formAddDialog, 'show_video', '')
+							// console.log(data);
+							if (!isEmpty(`${data.Location}`)) {
+								if (imgOrVideo == 'img') {
+									that.$set(that.formAddDialog, 'first_img', `https://${data.Location}`)
+								} else if (imgOrVideo == 'imgDetail') {
+									that.detail_img_array.push(`https://${data.Location}`)
+									that.$set(that.formAddDialog, 'detail_img', that.detail_img_array)
+								} else {
+									that.videoOptions.sources[0].src = `https://${data.Location}`
+									that.$set(that.formAddDialog, 'show_video', that.videoOptions)
+									that.$set(that.formAddDialog, 'post_video', `https://${data.Location}`)
+								}
+							} else {
+								if (imgOrVideo == 'img') {
+									that.$set(that.formAddDialog, 'first_img', '')
+								} else if (imgOrVideo == 'imgDetail') {
+									that.$set(that.formAddDialog, 'detail_img', '')
+								} else {
+									that.$set(that.formAddDialog, 'show_video', '')
+								}
+							}
 						}
 					}
-				}).catch((err) => {
-					// console.log(err);
-					that.$message.error(err.message)
-				});
+				);
 			},
 			// 周边修改上传文件
 			uploadModifyImageVideo(event, imgOrVideo) {
 				const file = event.target.files[0];
+				
+				const key = `/uploads/zhoubian/${new Date().getTime()}`; // 设置上传到 COS 后的文件名
 				var that = this
-				// 调用接口上传文件的逻辑
-				uploadFiles(file).then((res) => {
-					// console.log(res);
-					if (res.code === 1) {
-						if (!isEmpty(res.data)) {
-							if (imgOrVideo == 'img') {
-								that.$set(that.formModifyDialog, 'first_img', res.data)
-							} else if (imgOrVideo == 'imgDetail') {
-								that.detail_img_array.push(res.data)
-								that.$set(that.formModifyDialog, 'detail_img', that.detail_img_array)
-							} else {
-								that.videoOptions.sources[0].src = res.data
-								that.$set(that.formModifyDialog, 'show_video', that.videoOptions)
-								that.$set(that.formModifyDialog, 'post_video', res.data)
-							}
-						} else {
+				const cos = new COS(this.cosVal);
+				cos.putObject({
+						Bucket: "wanzai-1306339220",
+						Region: "ap-shanghai",
+						Key: key,
+						Body: file,
+					},
+					function(err, data) {
+						if (err) {
+							// console.error(err);
+							that.$message.error(err);
 							if (imgOrVideo == 'img') {
 								that.$set(that.formModifyDialog, 'first_img', '')
 							} else if (imgOrVideo == 'imgDetail') {
@@ -1214,20 +1231,32 @@
 							} else {
 								that.$set(that.formModifyDialog, 'show_video', '')
 							}
-						}
-					} else {
-						if (imgOrVideo == 'img') {
-							that.$set(that.formModifyDialog, 'first_img', '')
-						} else if (imgOrVideo == 'imgDetail') {
-							that.$set(that.formModifyDialog, 'detail_img', '')
+							return;
 						} else {
-							that.$set(that.formModifyDialog, 'show_video', '')
+							// console.log(data);
+							if (!isEmpty(`${data.Location}`)) {
+								if (imgOrVideo == 'img') {
+									that.$set(that.formModifyDialog, 'first_img', `https://${data.Location}`)
+								} else if (imgOrVideo == 'imgDetail') {
+									that.detail_img_array.push(`https://${data.Location}`)
+									that.$set(that.formModifyDialog, 'detail_img', that.detail_img_array)
+								} else {
+									that.videoOptions.sources[0].src = `https://${data.Location}`
+									that.$set(that.formModifyDialog, 'show_video', that.videoOptions)
+									that.$set(that.formModifyDialog, 'post_video', `https://${data.Location}`)
+								}
+							} else {
+								if (imgOrVideo == 'img') {
+									that.$set(that.formModifyDialog, 'first_img', '')
+								} else if (imgOrVideo == 'imgDetail') {
+									that.$set(that.formModifyDialog, 'detail_img', '')
+								} else {
+									that.$set(that.formModifyDialog, 'show_video', '')
+								}
+							}
 						}
 					}
-				}).catch((err) => {
-					// console.log(err);
-					that.$message.error(err.message)
-				});
+				);
 			},
 			// 删除本地显示的图片或视频
 			del_local_display_img(param) {

src/views/residentialhostelMgr/index.vue

@@ -183,9 +183,11 @@
 				<el-row>
 					<el-col :span="24">
 						<div style="font-size: 16px;font-weight: 700; color: rgba(0, 0, 0, 1); margin: 0 0 20px 20px;">营业执照</div>
-						<el-form-item label="" :required="true" prop="fileUrl" style="margin-bottom: -10px;">
+						<el-form-item label="" :required="true" prop="fileUrl" style="margin-bottom: -10px; zoom: 1;">
 							<pl-upload v-model="formAddHostel.fileUrl" :times="times" :linkUrl="formAddHostel.url" :limitCount="6" :type="1"></pl-upload>
+							<!-- <div style="height: 140px; width: 140px; border: 1px dashed #ccc; border-radius: 8px; margin-bottom: 10px; cursor: pointer;"></div> -->
 						</el-form-item>
+						<div></div>
 					</el-col>
 				</el-row>
 			</el-form>
@@ -1564,7 +1566,7 @@
 			 * 修改民宿
 			 */
 			modify_house_dialog(index, row) {
-				console.log(index, row);
+				// console.log(index, row);
 				var t = parseInt(row.hotelTownship);
 				this.formModifyHostel.id = row.id;
 				if (typeof t === 'number' && isNaN(t)) {