vue上传图片文件的多种实现方法

最开始百度到各种加headers,最后发现没什么用,有大兄弟知道的可以告知一下哦,记个随笔

原始input标签form表单上传

<input type="file" @change="onchangemd">

methods: {
 	onchangemd(e){
		console.log(e.target.files)//这个就是选中文件信息
		let formdata = new FormData()
		Array.from(e.target.files).map(item => {
         console.log(item)
         formdata.append("file", item)  //将每一个文件图片都加进formdata
       })
       axios.post("接口地址", formdata).then(res => { console.log(res) })
	}
 }

当看到二进制提交数据,就成功了(binary)


这种也是成功的(是二进制的展开数据。因为有些浏览器不显示binary)

上图可以看出 传统上传文件是以二进制的格式formdata格式提交

用elementui自带的el-upload上传

<el-upload action="" :on-change="handleelchange"  :auto-upload="false" list-type="picture-card">
     <i class="el-icon-plus"></i>
</el-upload>

 handleelchange(file, fileList) {
      console.log(file, fileList)
      let formdata = new FormData()
      fileList.map(item => { //fileList本来就是数组,就不用转为真数组了
        formdata.append("file", item.raw)  //将每一个文件图片都加进formdata
      })
       axios.post("接口地址", formdata).then(res => { console.log(res) })
    },

不用设置请求头等(直接用FormData格式提交就行),当看到formdata数据为二进制就说明提交正常(binary),同样有些浏览器不显示binary,以------WebKitFormBoundaryXoZpi2juymcNoW0l 开头的这种也是提交正常的

注意fileList数组中的raw才是真实文件数据,如果直接用item而不是item.raw,那么会报500错误,并且formdata中的数据不是二进制而是对象格式

fileList.map(item => {
formdata.append(“file”, item) //错误实例。要用item.raw
})

 elementui

elementui实现一次性上传多张图片

注意: 管用思维,点击提交然后触发表单提交事件,然后表单提交事件中发起请求。

结果: 上传每张图片都需要发起请求,即会发起多次请求

处理: 在submit阶段(即this.$refs.xxx.submit() 这步就发起请求),在提交函数中仅仅只进行图片获取

多张图片上传最后一个注意点: 多张图片的这个file不能写死,formdata.append(“file”, item) ,写为每张图片的指定name,不然会覆盖。

<el-upload ref="elupload" action="" multiple :auto-upload="false" :http-request="handleupload"  list-type="picture-card">
	<i class="el-icon-plus"></i>
</el-upload>
<button @click="uploadelupload">点击提交</button>

methods:{
	uploadelupload() {
      let formdata = new FormData()
      this.$refs.elupload.submit(); // 这里是执行文件上传的函数,其实也就是获取我们要上传的文件
      this.fileList.forEach(item => {
        formdata.append("file", item)  //将每一个文件图片都加进formdata
      })
      formdata.append("score", 4)
      axios.post("接口地址", formdata).then(res => { console.log(res) })
    },
    handleupload(param) {
      this.fileList.push(param.file);// 一般情况下是在这里创建FormData对象,但我们需要上传多个文件,为避免发送多次请求,因此在这里只进行文件的获取,param可以拿到文件上传的所有信息
    },
}

elementui提交图片以及其他数据

  • 后端让传图片、以及其他数据。
  • 注意图片文件等:必须使用formdata传过去
  • 其他数据等:用普通方式传递
代码与上述大体相同、这里就只写axios请求格式
let formdata = new FormData()
formdata.append("file", item)  //将每一个文件图片都
axios({
	method: "post",
 	url: "接口地址",
	data: formdata,
 	params: { score: 4, content: "xxxxx", order_detail_id: 24, token: "xxxx" }
}).then(res => { console.log(res) })

总结

到此这篇关于vue上传图片文件的文章就介绍到这了,更多相关vue上传图片文件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 使用Vue实现图片上传的三种方式

    项目中需要上传图片可谓是经常遇到的需求,本文将介绍 3 种不同的图片上传方式,在这总结分享一下,有什么建议或者意见,请大家踊跃提出来. 没有业务场景的功能都是耍流氓,那么我们先来模拟一个需要实现的业务场景.假设我们要做一个后台系统添加商品的页面,有一些商品名称.信息等字段,还有需要上传商品轮播图的需求. 我们就以Vue.Element-ui,封装组件为例子聊聊如何实现这个功能.其他框架或者不用框架实现的思路都差不多,本文主要聊聊实现思路. 1.云储存 常见的 七牛云,OSS(阿里云)等,这些云平

  • 基于VUE选择上传图片并页面显示(图片可删除)

    基于VUE选择上传图片并在页面显示,图片可删除,具体内容如下 demo例子: 依赖文件:jqueryform HTML文本内容: <template> <div id="accident"> <div class="wrapper"> <i class="icon-pic"></i>相关照片 <button type="button" @click="

  • vue+elementUi图片上传组件使用详解

    上传组件封装需求分析 在基于elementUI库做的商城后台管理中,需求最大的是商品管理表单这块,因为需要录入各种各样的商品图片信息.加上后台要求要传递小于2M的图片,因此封装了一个upload.vue组件作为上传页面的子组件,它用于管理图片上传逻辑. upload.vue解析 upload主要用于实现表单上传图片的需求,主要由input +img 构成当没有图片的时候显示默认图片,有图片则显示上传图片,因为input样式不太符合需求所以只是将起设置为不可见,不能将其设置为display:non

  • vue实现移动端图片裁剪上传功能

    本文实例为大家分享了vue移动端图片裁剪上传的具体代码,供大家参考,具体内容如下 1. 安装cropperjs依赖库 npm install cropperjs 2. 编写组件SimpleCropper.vue <template> <div class="v-simple-cropper"> <slot> <button @click="upload">上传图片</button> </slot>

  • vue+elementUI实现表单和图片上传及验证功能示例

    本文实例讲述了vue+elementUI实现表单和图片上传及验证功能.分享给大家供大家参考,具体如下: 最终实现需求如下图: form表单内容与重点人员图片同时上传且图片为必填项 分析弹框页需要解决的问题有: 1.表单内容的验证及必填项 2.新增和编辑用同一个组件如何处理数据 3.图片需要和信息一起传递(即不允许自动上传) 4.图片必填的验证问题 针对上述问题作出方案: 1.el-form的表单验证需要注意几个地方: a:el-form-item的prop值需要和表单标签的v-model值保持一

  • vue+elementUI实现图片上传功能

    本文实例为大家分享了vue+elementUI图片上传的具体代码,供大家参考,具体内容如下 1.html <el-form-item label="图片" prop="logo"> <el-upload name="file" v-if="optype==0" :action="'/upload'" accept=".jpg, .png" list-type="

  • vue实现的上传图片到数据库并显示到页面功能示例

    本文实例讲述了vue实现的上传图片到数据库并显示到页面功能.分享给大家供大家参考,具体如下: 1.点击上传图片,弹出选择图片选项框. 页面代码: <div class="form-signin-heading" id="btnUpload" @change="upload">上传图片</div> <input type="file" name="avatar" id="

  • vue.js 上传图片实例代码

    最近爱上了用vue.js做前端,昨天用vue上传图片时遇到了问题,最后半天时间终于摸索出来,我将相关部分的代码贴出来. 前端部分 <div class="form-group"> <label>背景图</label> <input type="file" class="form-control" @change="onFileChange"> </div> <d

  • vue.js 图片上传并预览及图片更换功能的实现代码

    这里讲解是图片上传和图片预览.主要是围绕我们常用功能的列子做讲解 ,并且没有格外引入其他js 所以你复制过去做简单修改便可以看到效果 效果图: 样式以及效果图一并展示 1.HTML <div class="rz-picter"> <img :src="avatar" class="img-avatar"> <input type="file" name="avatar" id=

  • vue实现图片上传功能

    本文实例为大家分享了vue实现图片上传功能的具体代码,供大家参考,具体内容如下 先看效果 图片上传使用vant组件库中的 van-uploader, 使用方法参考官网 vant组件库 下面看代码 UploadPicture.vue <template> <div class="content"> <!-- 底部模块start --> <div class="bottom_bg"> <p class="f

随机推荐