angular2通过formdata图片上传

àì夳堔傛蜴生んèń 2021-09-29 12:46 414阅读 0赞

图片上传是我目前在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" οnerrοr="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")
    }

效果如图：

上传前

![1350855-20180322170950256-1986043455.png][]

选择完图片后：

![1350855-20180322171010706-1543526289.png][]

查看./api/upload文件夹：

![1350855-20180322171018278-1571391293.png][]

转载于:https://www.cnblogs.com/VingB2by/p/8625021.html

[1350855-20180322170950256-1986043455.png]: /images/20210725/20164c4139f34d27a3e9f3ef7469c76a.png
[1350855-20180322171010706-1543526289.png]: /images/20210725/aa938c10fb694a70b37059f1b2db0535.png
[1350855-20180322171018278-1571391293.png]: /images/20210725/653d0cdd78544e7fb5176ecb3b003d4d.png