vue如何实现文件上传及预览 |
您所在的位置：网站首页 › vue实现图片上传并预览功能 › vue如何实现文件上传及预览 |
vue如何实现文件上传及预览
|
vue文件上传及预览 export default { name: "file", methods: { change(E) { //获取到获取的图片列表 （选择多张） let file = event.target.files[0]; //获取到获取的图片列表 （选择一张） //let img1 = event.target.files[0]; //let reader = new FileReader(); //console.log($("#uploaderInput")[0].files); //console.log(img1); //let type = file.type; //文件的类型，判断是否是图片 //let size = file.size; //文件的大小，判断图片的大小 var reader = new FileReader(); //新建FileReader对象 reader.readAsDataURL(file); //读取为base64 //以下代码可以删除 reader.onloadstart = function() { console.log("start"); //开始读取 }; //代码进度条 reader.onprogress = function(e) { //这个是定时触发的事件，文件较大的时候较明显 //console.log(e) var p = "已完成：" + Math.round(e.loaded / e.total * 100) + "%"; $(".file_upload") .find(".progress") .html(p); console.log("uploading"); //文件较大，就会出现多个uploading }; reader.onabort = function() { console.log("abort"); //用作取消上传功能 }; reader.onerror = function() { console.log("error"); //文件读取出错的时候触发，暂模拟不出 }; //成功后 获取文件url reader.onload = function(e) { console.log("load complete"); //完成 console.log(e); let res = e.target.result.split(";"); //截取 data:; base64 转换后默认会有data属性判断文件格式;分为两段，前段为data，后端为文件base64编码 if (res[0] != "data:application/apk;") { // 不同浏览器会有不一样的解析；so 这一步单独处理 _this.apk.app = "data:application/apk;" + res[1]; } else { _this.apk.app = e.target.result; } console.log(_this.apk.app) }; //预览代码 reader.onloadend = function(e) { var dataURL = reader.result, image = 'Name: " + name + " Size: " + size + "kb "; var imglist = 'X' + image + div + ""; $(".img_holder").html(imglist); }; // if (this.imgData.accept.indexOf(type) == -1) { // alert("请选择我们支持的图片格式！"); // return false; // } // if (size > 3145728) { // alert("请选择3M以内的图片！"); // return false; // } } } };vue多文件上传并预览 多文件上传预览基本思路 1、获取所上传的文件，input发生change事件时获取 e.target.files，这个变量就是文件列表 2、文件上传用的时FormData格式，这里我循环遍历了文件列表，并把文件append到FormData对象里 3、提交时把FormData对象提交到服务器即可 4、预览功能我用的FileReader的readAsDataURL方法将上传图片转为base64 5、读取操作是异步读取，这里用了Promise，读取操作完成后，触发onload事件，返回一个resolve状态并带上base64编码的字符串 6、将base64这串字符赋给img元素的src，即可预览图片 template： submitFilejs： data () { return { previewUrl: [], formData: undefined }, methods: { preview (file) { // 获取预览图片的base64 return new Promise((resolve, reject) => { let read = new FileReader() read.readAsDataURL(file) read.onload = function(e) { resolve(this.result) } }) }, upload (e) { // 选择图片后触发，将文件放到 formdata 对象里 this.previewUrl = [] const files = e.target.files const that = this this.formData = new FormData() console.log(files) for(let file of files){ this.formData.append('file', file) this.preview(file).then(res => { that.previewUrl.push(res) }) } console.log(this.formData.getAll('file')) }, submitFile (file, fileList) { // axios将数据发送到服务器 let setting = { url: 'http://localhost:3000/uploadfile', method: 'post', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, data: this.formData } this._axiosMock(setting).then(res => { console.log(res) }) } }总结 以上为个人经验，希望能给大家一个参考 参考文章：http://blog.ncmem.com/wordpress/2023/12/11/vue%e5%a6%82%e4%bd%95%e5%ae%9e%e7%8e%b0%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e5%8f%8a%e9%a2%84%e8%a7%88/ 欢迎入群一起讨论
|
【本文地址】
今日新闻 |
推荐新闻 |