angular2經過formdata圖片上傳

圖片上傳是我目前在angular2中遇到的最棘手的問題

雖然圖片上傳的實現就是文件上傳，一路展轉試過ng2-file-upload和ng2-image-upload的使用

可是因爲項目的開發是先後端分離的，因此最後都死在了跨域問題上（可能我學得不夠深不會處理）

在懟了快一個月的絕望以後在另外一位大大的代碼下下解決了這個問題

這一部分除了圖片其餘如視頻音樂也能經過修改完成上傳和預覽

html部分：

            <label>上傳縮略圖</label>
            <div class="file">選擇文件
                <input type="file" accept=".jpg,.png" name="image" (change)="selectedFileOnChanged($event)"> 
            </div>
            <div>
                 <img [src]="imageurl" onerror="this.src='http://localhost:80/api/uploaded/loading.jpg'" height="180">

            </div>

ts部分：（只給出主要部分）

 

 

imageurl:string="http://localhost:80/api/uploaded/loading.jpg";//日後端傳地址的url

imageUrl ="http://localhost:80/api/uploaded/";//前端ng-src獲取頁面的url

selectedFileOnChanged(event:any) {

if(event.target.files.length<0) {//判斷屬性裏有無文件
      return
      }
      let files = event.target.files[0];//獲取文件的各個參數
      let formData = new FormData();//建立一個formdata的空對象
      formData.append('image',files,files.name);//給這對象加鍵值,append(name, value, filename);name: 字段名稱,value: 字段數值,filename: 文件的文件名(可選).
      this.publish.imgFa(formData).subscribe(//後端經過json傳入圖片url，並返回url地址
        fb=>{
          const ret1=fb.json();
          this.imageurl=this.imageUrl+ret1.ImageUrl;
          console.log(this.imageurl);
        }
      );
      event.target.value = null;//把目標DOM元素化爲空

service部分：（只給出主要部分）

imgFa(formdata){
        return this.http.post(`${SITE_HOST_URL}${UploadAPI}`,formdata);
    }

　　後端golang代碼：

func UploadHandle(w http.ResponseWriter, r *http.Request) {
	w.Header().Set("Content-Type", "text/html")

	r.ParseForm()
	type URL struct {
		ImageUrl string `json:"ImageUrl"`
	}
	var imageurl URL
	if r.Method != "POST" {
		return
	}

	uploadFile, handle, err := r.FormFile("image")
	if ShowError(err, "圖片shangchun失敗1") {
		return
	}

	ext := strings.ToLower(path.Ext(handle.Filename))
	if ext != ".jpg" && ext != ".png" {
		return
	}
	absoultepath := GetSrcPath() + "src/api/uploaded/"
	//_dir := "./api/uploaded/"
	os.Mkdir(absoultepath, os.ModePerm)
	timenow := time.Now().UnixNano()
	strnow := strconv.FormatInt(timenow, 10)
	strnow = "img" + strnow + handle.Filename
	saveFile, err := os.OpenFile(absoultepath+strnow, os.O_WRONLY|os.O_CREATE, 0666)
	imageUrl := "http://localhost:80/api/uploaded/" + strnow
	fmt.Printf(imageUrl)
	imageurl.ImageUrl = strnow
	fbData, err := json.Marshal(imageurl)
	fmt.Fprintln(w, string(fbData))
	if ShowError(err, "圖片shangchuan失敗2") {
		return
	}
	io.Copy(saveFile, uploadFile)

	defer uploadFile.Close()
	defer saveFile.Close()
	fmt.Println("OK")
}

　效果如圖： 

上傳前

選擇完圖片後：

查看./api/upload文件夾：