问题描述
我正在尝试通过Angular使用Cloudinary图像上传。 我已经按照他们的文档安装了sdk（图像上传器）。而且我已经跟踪了有关组件和html的一些示例项目。
在我的项目中一切正常，但是当我尝试上传图像时，我总是收到错误消息：
Upload completed with status code 401
error { "message": "cloud_name is disabled" }
这是我的component.ts：
import { Component,OnInit,Input,NgZone } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FileUploader,FileUploaderOptions,ParsedResponseHeaders,FileUploadModule } from 'ng2-file-upload';
import { Cloudinary } from '@cloudinary/angular-5.x';
// https://www.youtube.com/watch?v=YkvqLNcJz3Y
@Component({
selector: 'app-cloudinary',templateUrl: './cloudinary.component.html',styleUrls: ['./cloudinary.component.scss']
})
export class CloudinaryComponent implements OnInit {
@Input()
responses: Array<any>;
public hasBaseDropZoneOver: boolean = false;
public uploader: FileUploader;
private title: string;
constructor(
private cloudinary: Cloudinary,private zone: NgZone,private http: HttpClient
) {
this.responses = [];
this.title = '';
}
ngOnInit(): void {
// Create the file uploader,wire it to upload to your account
const uploaderOptions: FileUploaderOptions = {
url: `https://api.cloudinary.com/v1_1/${this.cloudinary.config().CLOUD_NAME}/upload`,// Upload files automatically upon addition to upload queue
autoUpload: true,// Use xhrTransport in favor of iframeTransport
isHTML5: true,// Calculate progress independently for each uploaded file
removeAfterUpload: true,// XHR request headers
headers: [
{
name: 'X-Requested-With',value: 'XMLHttpRequest'
}
]
};
this.uploader = new FileUploader(uploaderOptions);
this.uploader.onBuildItemForm = (fileItem: any,form: FormData): any => {
// Add Cloudinary's unsigned upload preset to the upload form
form.append('upload_preset',this.cloudinary.config().upload_preset);
// Add built-in and custom tags for displaying the uploaded photo in the list
let tags = 'myphotoalbum';
if (this.title) {
form.append('context',`photo=${this.title}`);
tags = `myphotoalbum,${this.title}`;
}
// Upload to a custom folder
// Note that by default,when uploading via the API,folders are not automatically created in your Media Library.
// In order to automatically create the folders based on the API requests,// please go to your account upload settings and set the 'Auto-create folders' option to enabled.
form.append('folder','angular_sample');
// Add custom tags
form.append('tags',tags);
// Add file to upload
form.append('file',fileItem);
// Use default "withCredentials" value for CORS requests
fileItem.withCredentials = false;
return { fileItem,form };
};
// Insert or update an entry in the responses array
const upsertResponse = fileItem => {
// Run the update in a custom zone since for some reason change detection isn't performed
// as part of the XHR request to upload the files.
// Running in a custom zone forces change detection
this.zone.run(() => {
// Update an existing entry if it's upload hasn't completed yet
// Find the id of an existing item
const existingId = this.responses.reduce((prev,current,index) => {
if (current.file.name === fileItem.file.name && !current.status) {
return index;
}
return prev;
},-1);
if (existingId > -1) {
// Update existing item with new data
this.responses[existingId] = Object.assign(this.responses[existingId],fileItem);
} else {
// Create new response
this.responses.push(fileItem);
}
});
};
// Update model on completion of uploading a file
this.uploader.onCompleteItem = (item: any,response: string,status: number,headers: ParsedResponseHeaders) =>
upsertResponse(
{
file: item.file,status,data: JSON.parse(response)
}
);
// Update model on upload progress event
this.uploader.onProgressItem = (fileItem: any,progress: any) =>
upsertResponse(
{
file: fileItem.file,progress,data: {}
}
);
}
updateTitle(value: string) {
this.title = value;
}
// Delete an uploaded image
// Requires setting "Return delete token" to "Yes" in your upload preset configuration
// See also https://support.cloudinary.com/hc/en-us/articles/202521132-How-to-delete-an-image-from-the-client-side-
deleteImage = function (data: any,index: number) {
const url = `https://api.cloudinary.com/v1_1/${this.cloudinary.config().CLOUD_NAME}/delete_by_token`;
const headers = new Headers({ 'Content-Type': 'application/json','X-Requested-With': 'XMLHttpRequest' });
const options = { headers: headers };
const body = {
token: data.delete_token
};
this.http.post(url,body,options).subscribe(response => {
console.log(`Deleted image - ${data.public_id} ${response.result}`);
// Remove deleted item for responses
this.responses.splice(index,1);
});
};
fileOverBase(e: any): void {
this.hasBaseDropZoneOver = e;
}
getFileProperties(fileProperties: any) {
// Transforms Javascript Object to an iterable to be used by *ngFor
if (!fileProperties) {
return null;
}
return Object.keys(fileProperties)
.map((key) => ({ 'key': key,'value': fileProperties[key] }));
}
}
这是我的component.html：
<h1>Image Upload to Cloudinary TESTING</h1>
<div id="direct_upload" ng2FileDrop [uploader]="uploader" (fileOver)="fileOverBase($event)" [ngClass]="{'nv-file-over': hasBaseDropZoneOver}">
<h1>New Photo</h1>
<h2>Direct upload from the browser with Angular File Upload</h2>
<p>You can also drag and drop an image file into the dashed area.</p>
<form>
<div class="form_line">
<label path="title">Title:</label>
<div class="form_controls">
<input type="text" class="form-control" #title placeholder="Title" (keyup.enter)="updateTitle(title.value)" (blur)="updateTitle(title.value)"
/>
</div>
</div>
<div class="form_line">
<label>Image:</label>
<div class="form_controls">
<div class="upload_button_holder">
<label class="upload_button" for="fileupload">Upload</label>
<!-- onChange hanlder resets the input value to get the change event when uploading the same file consecutively -->
<input type="file" id="fileupload" #fileInput ng2FileSelect [style.display]="'none'" [uploader]="uploader" (change)="fileInput.value=''"
multiple />
</div>
</div>
</div>
</form>
<h2>Status</h2>
<div class="file" *ngFor="let response of responses; let i = index">
<h3>{{response.file.name}}</h3>
<button class="delete-image" *ngIf="!!response.data.delete_token" (click)="deleteImage(response.data,i)">Delete image</button>
<div class="status">
Uploading... {{response.progress}}%
<div *ngIf="!response.status">In progress</div>
<div class="status-code" *ngIf="response.status">Upload completed with status code {{response.status}}</div>
</div>
<div class="progress-bar">
<div class="progress" role="progressbar" [style.width.%]="response.progress"></div>
</div>
<div class="form_line">
<div class="form_controls">
<div class="preview">
<!-- Consider using https://github.com/valor-software/ng2-file-upload/issues/461 for image preview -->
</div>
</div>
</div>
<div class="info">
<table>
<tr *ngFor="let property of getFileProperties(response.data)">
<td> {{ property.key }} </td>
<td> {{ property.value | json}} </td>
</tr>
</table>
</div>
</div>
</div>
然后在我的app.module.ts中进行导入：
...
import { CloudinaryModule,CloudinaryConfiguration } from '@cloudinary/angular-5.x';
import { Cloudinary } from 'cloudinary-core';
import { FileUploadModule } from "ng2-file-upload";
@NgModule({
declarations: [
...
CloudinaryComponent
],imports: [
...
// Cloudinary import
CloudinaryModule.forRoot({Cloudinary},{ cloud_name: 'CLOUDN_NAME' } as CloudinaryConfiguration),FileUploadModule
],providers: [
...
],bootstrap: [AppComponent]
})
export class AppModule { }
所以我真的不明白为什么它没有得到授权，但令我困扰的是在使用Angular的Cloudinary文档中，我看不到应该将API Key和{{ 1}}。
在我的项目中，我找不到API Secret systemjs.config.js之类的文件。
如果有人可以帮助我，那就太好了！
谢谢
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）