vue上传文件(图片),并预览图片的方法(不使用第三方库)
+思路:1.点击 input标签,打开文件库,点选图片后,执行uploadFile(event)函数.<fontcolor=red>注意:要是change事件</font>2.在uploadFile(event)函数 .<font color=red>注意:要是change事件</font&.
·
+思路:
1.点击 input标签,打开文件库,点选图片后,执行uploadFile($event)函数 .注意:要是change事件
2.在uploadFile($event)函数中读取图片文件,拿到base64文件,直接给img标签的src属性,图片即可预览
3.图片上传,要将图片转成formData格式发送请求给后台
-
代码
HTML代码:<div class="alert-box-item" > 拍照 <input @change="uploadFile($event)" type="file"> //用来打开手机或者电脑端的文件,然后读取文件 <img :src=valueUrl v-if="valueUrl"> // 预览图片用 </div>
js代码:
uploadFile (el) {
if (!el.target.files[0].size) return; // 如果文件大小为0,则返回
if (el.target.files[0].type.indexOf('image') === -1) { //如果不是图片格式
// this.$dialog.toast({ mes: '请选择图片文件' });
console.log('请选择图片文件');
} else {
const that = this;
const reader = new FileReader(); // 创建读取文件对象
reader.readAsDataURL(el.target.files[0]); // 发起异步请求,读取文件
reader.onload = function () { // 文件读取完成后
// 读取完成后,将结果赋值给img的src
that.valueUrl = this.result;
// console.log(this.result);
};
const uid = 'e0c9dd3de0418e698d49984ae035992a'; //后台需要的参数
const formData = new FormData(); // 创建一个formdata对象
formData.append('res', el.target.files[0]);
formData.append('uid', uid);
postUploadFile(formData).then(res => { // 发送请求,保存图片
if (res.status === 0) {
this.valueUrl = res.data;
} else {
console.log(res);
}
});
}
},
更多推荐
已为社区贡献16条内容
所有评论(0)