多图片上传 js+html+go

一、前端

1、使用input的file的类型实现图片上传，添加multiple属性实现多图片上传

<form method="post" action="/" enctype="multipart/form-data"> //多图片

<div class="input-file-box">
    <span>点击上传图片</span>
    <input type="file" name="myGoodsImg" id="uploadfile" multiple> //name属性提供给后端接口
</div>
<div id="img-box"></div>   //预览图片的位置

 <button type="submit" class="btn btn-primary mt-4" id="ensure">确认上传</button>

</form>

2、js代码

window.onload=function(){
	var input=document.getElementById("uploadfile");//使用id查找图片文件
	var div;
	// 当用户上传时触发事件
	input.onchange=function(){
		readFile(this);
	}
	//处理图片并添加都dom中的函数
	var readFile=function(obj){
		// 获取input里面的文件组
		var fileList=obj.files;
		//对文件组进行遍历，可以到控制台打印出fileList去看看
		for(var i=0;i<fileList.length;i++){
			var reader= new FileReader();
			reader.readAsDataURL(fileList[i]);
			 // 当文件读取成功时执行的函数
			reader.onload=function(e){
				div=document.createElement('div');
				div.innerHTML='<img src="'+this.result+'" />';   //这里的 **this.result** 获取文件读取的结果，也可以用**e.target.result**。把结果放在img的src中。
				document.getElementById("img-box").appendChild(div);
			}
		}
	}
}

可以打印一下obj.files返回一个FileList对象，了解一下里面存了哪些东西。
一般有：

• lastModified和lastModifiedDate 代表文件的上次修改时间，返回的格式不一样
• name：文件名，只读
• size：文件大小，单位是字节，只读
• type：文件MIME类型，只读

3、css

为了样式能够更好看点，更改一下input的框。
也可以自己添加样式。

    /*input框*/
.input-file-box #uploadfile{
     opacity: 0;
     width: 100%;
     height: 100%;
     cursor: pointer;
  }

2、后端

1、定义路由

todo.POST("/", addmoreImg)

2、方法

func addmoreImg(c *gin.Context) {
 
   form, err := c.MultipartForm()

   // 获取所有图片
   files := form.File["myGoodsImg"]  //是通过name属性获取
   fmt.Println("files", files)
   //存储所有图片路径
   var goodsImgs []string

   fildDir := "./Static/images/"

   // 遍历所有图片
   for _, file := range files {
      fmt.Println("fileok")
      // 逐个存
      fileName := file.Filename
      filepath := fmt.Sprintf("%s%s", fildDir, fileName)
      fileH := fmt.Sprintf("share/images/%s", fileName)
      //fmt.Println("path",filepath)
      goodsImgs = append(goodsImgs, fileH)
      if err := c.SaveUploadedFile(file, filepath); err != nil {
         c.String(http.StatusBadRequest, fmt.Sprintf("upload err %s", err.Error()))
         return
      }
   }
   //goodsImgs := c.PostForm("goodsImgs")
   fmt.Println("pass", name)
   fmt.Println("goodsImg", goodsImgs)

  
   fmt.Println("addGood", data)
   c.Redirect(http.StatusFound, "/cart")
}