html+js+go实现多图片上传

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一、前端

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

```html

//多图片

点击上传图片 //name属性提供给后端接口

确认上传

```

2、js代码

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的框。 也可以自己添加样式。 ```css

/*input框*/

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

2、后端

1、定义路由

GO todo.POST("/", addmoreImg)

2、方法

```GO

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") }

```