如何使用Angular7和node.js一次上传图像数组和缩略图图像?

我有一个基于server-side的{​​{1}},其中我有一个node.js(express)用于添加api,其中我正在获取已预订商品的图像BookingItem

我在array的服务器端这样做

bookingItem.route.js

然后在我的var storage = multer.diskStorage({ destination: function (req,file,cb) { cb(null,'uploads/item') },filename: function (req,cb) { let customFileName = crypto.randomBytes(18).toString('hex'),fileExtension = file.originalname.split('.')[file.originalname.split('.').length - 1] // get file extension from original file name cb(null,customFileName + '.' + fileExtension) } }); var upload = multer({ storage: storage }); router.post("/",log,loggedIn,upload.array("image",5),addBookingItem); 中保存这样的预订项目

bookingItem.controller.js

export async function addBookingItem(req,res) { let body = parseBody(req) if (body) { if (req.files) { let pictures = [] req.files.forEach(item => { pictures.push(item.filename) }) body.picture = pictures } if (body.amenityIds) { let amenityIds = body.amenityIds.split(",") body.amenityIds = amenityIds } body.createdAt = Date.now() body.updatedAt = Date.now() let itemObject = new BookingItem(body) let item = await itemObject.save() if (item) { generateResponse(true,"Booking Item" + MESSAGES.ADDED,item,res) } else { generateResponse(false,MESSAGES.CANT_ADD,null,res) } } else { generateResponse(false,MESSAGES.COMPLETE_INFO,res) } } 上,我正在使用client-side,并且像这样从客户端发送图片

angular7

在我的component.ts中,我正在这样做

<input style="display: none" type="file" (change)="onFileChanged($event)" multiple #fileInput>
<button (click)="fileInput.click()" class="btn btn-primary float-left"> Upload Pictures</button>

这工作得很好,我将图像路径保存在onFileChanged(event) { this.selectedPictures = Array.from(event.target.files) this.data = new FormData() Array.from(this.selectedPictures).forEach((item: any) => { this.data.append('image',item) }) } addVenue() { this.spinnerService.show() if (this.selectedAmenities.length > 0) { let am = [] this.selectedAmenities.forEach((item: any) => { am.push(item._id) }) if (am.length > 0) { this.amenityIds = am.join(",") } } let tempFor = [] let tempType = [] let tempBookingType = [] this.selectedFor.forEach(item => { tempFor.push(item.name) }) this.selectedVenueType.forEach(item => { tempType.push(item.name) }) this.selectedBookingType.forEach(item => { tempBookingType.push(item.name) }) this.data.append("name",this.addVenueForm.value.name) this.data.append("checkIn",this.addVenueForm.value.checkIn) this.data.append("checkOut",this.addVenueForm.value.checkOut) this.data.append("pricePerNight",this.addVenueForm.value.pricePerNight) this.data.append("for",tempFor) this.data.append("bookingType",tempBookingType) this.data.append("type",tempType) this.data.append("amenityIds",this.amenityIds) this.data.append("locationId",this.addVenueForm.value.locationId) this.appService.addBookingItem(this.data).then((resp: any) => { this.appService.showSimpleAlert("Venue",resp.message,resp.success ? 'success' : 'error'); if (resp.success) { this.selectedBookingType = [] this.selectedAmenities = [] this.selectedFor = [] this.selectedVenueType = [] this.selectedPictures = [] this.addVenueForm.reset() this.spinnerService.hide() } }) } 集合中。但是目前我正在将mongo图像作为数组发送,现在我也想上传bookingItem图像和thubmnail图像。那么,如何分别发送3种类型的图像并在cover上获得这3种类型的图像?

yy031003 回答:如何使用Angular7和node.js一次上传图像数组和缩略图图像?

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3108236.html

大家都在问