温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue如何实现上传图片文件

发布时间:2021-05-14 14:31:31 来源:亿速云 阅读:540 作者:小新 栏目:开发技术

这篇文章给大家分享的是有关vue如何实现上传图片文件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

原始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)

vue如何实现上传图片文件
vue如何实现上传图片文件

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

vue如何实现上传图片文件

上图可以看出 传统上传文件是以二进制的格式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 开头的这种也是提交正常的

vue如何实现上传图片文件

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

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

vue如何实现上传图片文件 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是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它大型框架的区别是,使用Vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

感谢各位的阅读!关于“vue如何实现上传图片文件”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue
AI