第一步 创建上传点击事件
<input ref="file" type="file" name="" style="display: none" @change="onChange" /> type：属性值决定上传文件的类型 @change: input的值变化时触发 this.$refs.file.click(): 触发弹框，让其可以选择 选择好要上传的文件后，点击打开，于此就会触发@change事件 第二步 处理接收的文件
onChange() { // 获取上传后的文件信息 const file = this.$refs.file?.files[0]； // 获取到文件信息后，后边就是如何将文件信息上传到服务端 // 这里说明，要根据后端接口需求进行响应的传递 // 区别一，上传的是图片文件，后端接口需要的是base64格式的图片信息，此时需要将获取的file转成base64 // 区别二，后端接口需要formdata格式文件，此时就要将file转成formdata格式发送给后端 // 这里说明一下formdata格式上传 // url 接口地址全地址 this.uploadFile(file, url); } 第三步 处理服务端上传
uploadFile(file, url) { // 处理文件转换成formData格式 const formdata = new FormData(); // 这里只是基本设置，对应接口需求设置响应的类型属性值 formdata.set('file', file); formdata.set('Status', 0); // 接口调用 let xml = new XMLHttpRequest(); xml.open('POST', url， true) // 第三个值指定接口是否异步 // 设置请求头信息 xml.setRequestHeader(’token‘, token); // 监控上传进度 xml.upload.onprogress = this.onprogressEvent // 接口调用成功回调 xml.onload = this.onloadEvent // 接口调用失败处理 xml.onerror = this.onerrorEvent } onprogressEvent(e) { if (e.lengthComputable) { // 可以获取到实时的接口进度 this.realTimePercent = +parseInt((e.loaded / e.total) * 100); } } onloadEvent(e) { // 获取到接口调用成功后的返回数据 const res = JSON.parse(e.currentTarget.response); ... } onerrorEvent(e) { // 接口调用失败后的处理 。。。 } 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/230662.html原文链接：https://javaforall.net
