vue怎么去做上传图片功能（vue+html5实现上传图片）
导读：原理:dispatchEvent 自定义触发事件，常用于自定义鼠标事件或点击事件 ,原生控件input打开上传文件方案：vue项目,点击自己的上传文件图标，通过dispatchEvent主动触发一个自定义上传文件事件 ....
原理:dispatchEvent 自定义触发事件 ，常用于自定义鼠标事件或点击事件 ,原生控件input打开上传文件
方案：vue项目,点击自己的上传文件图标 ，通过dispatchEvent主动触发一个自定义上传文件事件 . 原生控件 inputaccept 属性:
accept = "audio/*" :接受所有的声音文件
accept = "video/* " :接受所有的视频文件accept = "image/* " :接受所有的图像文件 。
如需规定多个值 ，请使用逗号分隔（比如 <input accept="audio/*,video/*,image/*" />） 。
隐藏原生上传控件 ，使用自己上传的图标实现上传功能
<template>
<section>
<!-- 自定义上传按钮 -->
<div class="list-items">
<span>活动主K</span>
<div class="images" @click="uploadImg(1)">
<img :src=")" alt="" />
</div>
</div>
<!-- 原生控件 -->
<input class="uploadfile" type="file" @change="fileImage" ref="filElem" accept="image/*" />
</section>
</template>
<script>
export default {
methods: {
// 上传图片
uploadImg() {
if (this.$store.state.isInApp) {
console.log(isInApp);
} else {
// 触发一个自定义事件
this.$refs.filElem.dispatchEvent(new MouseEvent("click"));
}
},
fileImage(e) {
let that = this;
let file = e.target.files[0];
this.file = file;
// 校验图片格式
var rFilter = /^(image\/jpeg|image\/jpg|image\/png|image\/gif)$/i; // 检查图片格式
if (!rFilter.test(file.type)) {
$utilMsg.warn("不支持的格式 ，请重新上传！");
return false;
}
// 判断图片是否大于10M
if (file.size >= 10 * 1000 * 1024) {
return $utilMsg.warn("上传图片过大 ，请重新选择");
}
this.upImgUrl()
},
upImgUrl() {
let params = new FormData();
params.append("file[]", this.file);
let that = this
return window.$.ajax({
type: "POST",
url: xxxxx,
data: params,
contentType: false,
processData: false,
mimeType: "multipart/form-data",
success: function (data) {
data = JSON.parse(data);
if (+data.code === 0) {
let imgarr = data.data
that.picThumb = imgarr[0].showPath;
console.log(外部图片, imgarr);
} else {
console.log(上传失败);
return
}
},
});
},
}
}
</script>
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！