FormData多图片上传(每次只能传送最后一张图片的问题)

本文介绍了一种解决多图片上传时出现的图片覆盖问题的方法。通过将上传的图片追加到 FormData 数组中,确保了所有图片都能成功上传而不会被后续图片覆盖。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

     最近在需要做一个多图片上传的功能,上传的图片,一直被最后一张图片覆盖,只能上传最后一张一张。代码如下:

                    var formData = new FormData();

                    var pic = document.getElementById("goodsDetailPic").files;

                    for(var j=0;j<pic.length;j++){
                        formData.append('goodsPhoto',pic[j]);
                    }

     解决方法:

		   var formData = new FormData();

                    var pic = document.getElementById("goodsDetailPic").files;

                    for(var j=0;j<pic.length;j++){
                        formData.append('goodsPhoto[]',pic[j]);  
                    }
  

     把保存上传图片的变量,声明为一个数组,所有图片都会被压进数组,就不会被后面上传的图片所覆盖。

    

### Vue.js 表单图片上传实现方法 #### 准备工作 为了在 Vue.js 中实现表单图片上传,需先确保对 Vue.js 基础组件、数据绑定以及事件处理有一定理解[^1]。 #### 创建 Vue 实例并设置配置项 初始化一个新的 Vue 应用程序,会创建一个 Vue 实例,在此过程中可以定义所需的数据属性和方法。对于文件上传来说,这通常涉及到管理文件输入的状态变化及其触发的动作[^2]。 ```javascript new Vue({ el: '#app', data() { return { imageFile: null, }; }, }); ``` #### 构建 HTML 文件输入控件并与 Vue 数据双向绑定 HTML 提供了一个 `<input type="file">` 元素用于让用户选择要上传的文件。通过 `v-model` 或者监听器配合自定义逻辑可使选中的文件与 Vue 的响应式状态同步。 ```html <input id="imageUpload" type="file" @change="onImageChange"> <img v-if="imageFile" :src="previewImage" alt="Preview Image"/> ``` #### 处理图像预览及上传逻辑 当用户选择了图片之后,可以通过 JavaScript 访问到 File 对象,并利用 FileReader API 来读取文件内容作为 base64 编码字符串显示出来;同也可以准备将这些信息发送给服务器端接口完成实际存储操作。 ```javascript methods: { onImageChange(event) { const file = event.target.files[0]; this.imageFile = file; let reader = new FileReader(); reader.onloadend = () => { this.previewImage = reader.result; } if (file) { reader.readAsDataURL(file); } else { this.previewImage = null; } }, uploadImage() { // 使用 FormData 封装待传输的数据 var formData = new FormData(); formData.append('image', this.imageFile); axios.post('/api/upload-image', formData, { headers: {'Content-Type': 'multipart/form-data'} }) .then(response => console.log(response)) .catch(error => console.error(error)); } } ``` 上述代码片段展示了如何捕获用户的文件选择动作并将选定的图片展示为缩略图,同也包含了向远程API发起POST请求以执行真正的文件上载过程的方法[^3]。 #### 集成完整的表单提交流程 最后一步就是把所有的部分组合起来形成一个连贯的工作流——允许用户填写其他必要的字段(如果有的话),点击按钮后不仅能够保存文本型的信息还能一并将关联的照片资料一同递交出去[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值