vue文件上传及预览
<template>
<div id="file">
<input name="files" id="uploaderInput" type="file" accept="images/*" multiple @change="change"/>
<div class="file_upload">
<div class="progress"></div>
</div>
<div class="img_holder"></div>
</div>
</template>
<script>
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 = '<img src="' + dataURL + '"/>', //预览图片
text = '<span>"' + dataURL + '"</span>'; //测试预览text
var name = file.name,
size = Math.round(file.size / 1024);
var div = "<p>Name: " + name + "</p><p>Size: " + size + "kb</p>";
var imglist =
'<div class="img_box"><span class="delete">X</span>' +
image +
div +
"</div>";
$(".img_holder").html(imglist);
};
// if (this.imgData.accept.indexOf(type) == -1) {
// alert("请选择我们支持的图片格式！");
// return false;
// }
// if (size > 3145728) {
// alert("请选择3M以内的图片！");
// return false;
// }
}
}
};
</script>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：
<input type="file" multiple @change="upload" /><br />
<img v-for="item in previewUrl" :src="item" width="100" /><br />
<button type="button" @click="submitFile">submitFile</button>
js：
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如何实现文件上传及预览/
