![](/img/trans.png)
[英]Cloudinary jQuery File Upload - image not uploading after selection
[英]Not returning the file instance after uploading the files to cloudinary nestjs
在成功將資產上傳到他們的服務器后,我正在嘗試獲取 cloudinary 返回的安全文件 url。 我可以將文件上傳到 cloudinary,但是當我嘗試通過console.log(res)
查看響應時,不幸的是我沒有定義。
代碼:-
// cloudinary.service.ts
import { Injectable } from '@nestjs/common';
import { UploadApiErrorResponse, UploadApiResponse, v2 } from 'cloudinary';
import toStream = require('buffer-to-stream');
import { ConfigService } from '@nestjs/config';
@Injectable()
export class CloudinaryService {
constructor(private configService: ConfigService) {}
async uploadMedia(
file: Express.Multer.File,
): Promise<UploadApiResponse | UploadApiErrorResponse> {
return new Promise((resolve, reject) => {
const upload = v2.uploader.upload_stream(
{
upload_preset: this.configService.get('CLOUDINARY_UPLOAD_PRESET'),
},
(error, result) => {
if (error) return reject(error);
resolve(result);
},
);
toStream(file.buffer).pipe(upload);
});
}
}
// cloudinary.module.ts
import { Module } from '@nestjs/common';
import { CloudinaryProvider } from './cloudinary.provider';
import { CloudinaryService } from './cloudinary.service';
import { ConfigModule } from '@nestjs/config';
@Module({
imports: [ConfigModule],
providers: [CloudinaryProvider, CloudinaryService],
exports: [CloudinaryProvider, CloudinaryService],
})
export class CloudinaryModule {}
// cloudinary.provider.ts
import { v2 } from 'cloudinary';
export const CloudinaryProvider = {
provide: `${process.env.CLOUDINARY_PROVIDER_TOKEN}`,
useFactory: () => {
return v2.config({
cloud_name: `${process.env.CLOUDINARY_CLOUD_NAME}`,
api_key: `${process.env.CLOUDINARY_API_KEY}`,
api_secret: `${process.env.CLOUDINARY_API_SECRET}`,
});
},
};
// media.controller.ts
import {
Controller,
Post,
UploadedFile,
UseInterceptors,
} from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';
import { MediaService } from './media.service';
@Controller('media')
export class MediaController {
constructor(private mediaService: MediaService) {}
@Post('upload')
@UseInterceptors(FileInterceptor('file'))
upload(@UploadedFile() file: Express.Multer.File) {
return this.mediaService.uploadMediaToCloudinary(file);
}
}
// media.service.ts
import { HttpException, HttpStatus, Injectable } from '@nestjs/common';
import { CloudinaryService } from '../cloudinary/cloudinary.service';
@Injectable()
export class MediaService {
constructor(private cloudinaryService: CloudinaryService) {}
async uploadMediaToCloudinary(file: Express.Multer.File) {
return await this.cloudinaryService.uploadMedia(file).catch(error => {
throw new HttpException(
{
message: error.message,
},
HttpStatus.INTERNAL_SERVER_ERROR,
);
});
}
}
// media.module.ts
import { Module } from '@nestjs/common';
import { CloudinaryModule } from 'src/cloudinary/cloudinary.module';
import { MediaController } from './media.controller';
import { MediaService } from './media.service';
@Module({
imports: [CloudinaryModule],
controllers: [MediaController],
providers: [MediaService],
})
export class MediaModule {}
// app.module.ts
import { Module } from '@nestjs/common';
import { ConfigModule, ConfigService } from '@nestjs/config';
import { MongooseModule } from '@nestjs/mongoose';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { CloudinaryModule } from './cloudinary/cloudinary.module';
import { MediaModule } from './media/media.module';
@Module({
imports: [
ConfigModule.forRoot({
envFilePath: '.env',
}),
MongooseModule.forRootAsync({
imports: [ConfigModule],
useFactory: async (configService: ConfigService) => ({
uri: configService.get<string>('MONGO_URI'),
}),
inject: [ConfigService],
}),
CloudinaryModule,
MediaModule,
],
controllers: [AppController],
providers: [AppService],
})
export class AppModule {}
Nestjs 文件上傳文檔:- https://docs.nestjs.com/techniques/file-upload [在此處輸入鏈接描述] 1
測試客戶端:- https://codesandbox.io/s/file-link-generator-example-app-react-byez4?file=/src/App/UploadFile.js
我不得不在一個項目中做這個。 我使用 Cloudinary 上傳 API 而不是 upload_stream api。 我還必須對從前端發送的文件進行 base64 編碼。 這是我如何做到的。
@Post()
@UseInterceptors(FileInterceptor('file'))
async uploadFile(@UploadedFile() file, @Body() body) {
const dto = JSON.parse(body.reportData);
if (file) {
const imageBuffer = await this.encodeImageForCloudinary(file.buffer, file.mimetype);
const cloudinaryStoredImage = await this.cloudinaryService.uploadImg(imageBuffer);
dto.imageUrl = cloudinaryStoredImage.url;
}
return await this.save(dto);
}
async save(@Body() dto) {
let report = this.mapToEntity(dto);
report = await this.reportService.add(report);
return this.mapToDTO(report);
}
encodeImageForCloudinary(data, mediaType) {
if (!data || !mediaType) {
this.logger.log('ImageDataURI :: Error :: Missing some of the required params: data, mediaType ');
return null;
}
mediaType = (/\//.test(mediaType)) ? mediaType : 'image/' + mediaType;
const dataBase64 = (Buffer.isBuffer(data)) ? data.toString('base64') : Buffer.from(data).toString('base64');
const dataImgBase64 = 'data:' + mediaType + ';base64,' + dataBase64;
return dataImgBase64;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.