node.js - 如何从角度发送 https 发布请求?
问题描述
当我尝试在 heroku 上上传图片时,出现此错误:混合内容:“ https://twassol.herokuapp.com/ ”的页面通过 HTTPS 加载,但请求了不安全的图片“ http://twassol.herokuapp。 com/images/%D8%A8%D8%B7%D8%A7%D8%B1%D9%8A%D9%82-1564103914328.jpg '。此内容也应通过 HTTPS 提供。
这个错误:跨域读取阻塞(CORB)阻止了跨域响应http://twassol.herokuapp.com/images/%D8%A8%D8%B7%D8%A7%D8%B1%D9%8A% D9%82-1564103914328.jpg,MIME 类型为 text/html。有关详细信息,请参阅https://www.chromestatus.com/feature/5629709824032768 。
我尝试使用“ http://twassol.herokuapp.com/ ”,它上传图片但不显示。
这是 post.service.ts 文件:
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import { Subject } from 'rxjs';
import { map } from 'rxjs/operators';
import { Post } from './post.model';
import { environment } from '../../environments/environment';
const BACKEND_URL = environment.apiUrl + '/posts/';
@Injectable({providedIn: 'root'})
export class PostsService {
private posts: Post[] = [];
private postsUpdated = new Subject<{posts: Post[], postsCount: number}>();
constructor(private http: HttpClient, private router: Router){}
getPosts(postsPerPage: number, currentPage: number) {
const queryParams = `?pagesize=${postsPerPage}&page=${currentPage}`
this.http.get<{ message: string, posts: any, maxPosts: number }>(BACKEND_URL + queryParams)
.pipe(map( postData => {
return { posts :postData.posts.map(post =>{
return{
title: post.title,
content: post.content,
id: post._id,
imagePath: post.imagePath,
creator: post.creator
}
}), maxPosts: postData.maxPosts};
}))
.subscribe((transformedPostData) => {
this.posts = transformedPostData.posts;
this.postsUpdated.next({posts: [...this.posts], postsCount: transformedPostData.maxPosts});
});
}
getPostUpdateListener(){
return this.postsUpdated.asObservable()
}
getPost(id: string){
return this.http.get<{_id: string, title: string, content: string, imagePath: string, creator: string}>(
BACKEND_URL + id
);
}
addPost(title: string, content: string, image: File){
const postData = new FormData;
postData.append('title', title);
postData.append('content', content);
postData.append('image', image, title);
this.http.post<{message: string, post: Post}>(BACKEND_URL, postData)
.subscribe( responseData => {
this.router.navigate(['/']);
});
}
updatePost(id: string, title: string, content: string, image: string | File){
let postData: Post | FormData;
if (typeof(image) === 'object'){
postData = new FormData;
postData.append('id', id);
postData.append('title', title);
postData.append('content', content);
postData.append('image', image, title);
} else {
postData = {
id: id,
title: title,
content: content,
imagePath: image,
creator: null
}
}
this.http
.put(BACKEND_URL + id, postData)
.subscribe(response => {
this.router.navigate(['/']);
});
}
deletePost(postId: string){
return this.http.delete(BACKEND_URL + postId)
}
}
解决方案
将您的图像转换为 base64 字符串并在发布请求中传递
html:
<button type="button" (click)="upload.click()" >
<span>Upload Photo</span>
</button>
<input #upload formControlName="imageData" type="file" name="imageData" accept='image/*' (change)="getFiles($event)"style="display:none;">
ts:
getFiles(event) {
this.files = event.target.files;
var reader = new FileReader();
reader.onload = this._handleReaderLoaded.bind(this);
reader.readAsBinaryString(this.files[0]);
}
_handleReaderLoaded(readerEvt) {
var binaryString = readerEvt.target.result;
this.base64DataOfImage= btoa(binaryString);
this.{{your Model}}.imageData = this.base64DataOfImage
this.fileSrc = 'data:image/png;base64,'+this.base64DataOfImage;
}
从服务中取回数据
html
<img height="200" [src]="fileSrc" />
ts
//service call(assuming the returned as {"imageData":"base64data"})
this.fileSrc='data:image/png;base64,'+responce.imageData;
确保您在后端增加您的请求正文大小
app.use(bodyParser.json({limit: "50mb"}));
app.use(bodyParser.urlencoded({limit: "50mb", extended: true, parameterLimit:50000}));
推荐阅读
- javascript - Bootstrap 显示 flex 和 javascript windows.load
- java - 将六边形矩阵(轴坐标)转换为Java游戏的索引
- java - 如何查找二维数组的行数和列数以存储 0 到 1000 之间的素数
- azure - 在发布管道期间将文件复制到 Azure 应用服务
- python - 使用范围数据集返回累积和 2s
- javascript - 如何根据其 null 键值操作 JavaScript 数组对象数据
- javascript - 节点红色字符串转换为有效负载名称
- javascript - Javascript - 对象键/值
- google-chrome - Google Chrome(版本 79.0.3945.117)在调试应用程序时一次又一次崩溃
- office-js - 使用合作伙伴中心发布面向大型组织和企业的 Office 加载项