如何從Angular發送https發布請求？

Question

當我嘗試在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%B8%%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)
  }
}

Answer 1

將您的圖片轉換為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}));