原理:dispatchEvent 自定义触发事件,常用于自定义鼠标事件或点击事件 ,原生控件input打开上传文件
方案:vue项目,点击自己的上传文件图标,通过dispatchEvent主动触发一个自定义上传文件事件 .
- 原生控件 input
accept 属性:
accept = "audio/* " :接受所有的声音文件
accept = "video/* " :接受所有的视频文件accept = "image/* " :接受所有的图像文件。
如需规定多个值,请使用逗号分隔(比如 <input accept="audio/*,video/*,image/*" />)。
<input type="file" accept="image/*" // 可以打开相机或文件,"jpg,png,gif"这种打开只能上传特定文件且没有相机 @change="changeImage()" ref="avatarInput" style="display:none" >
- 隐藏原生上传控件,使用自己上传的图标实现上传功能
-
<template> <section> <!-- 自定义上传按钮 --> <div class="list-items"> <span>活动主K</span> <div class="images" @click="uploadImg(1)"> <img :src="require('./images/[email protected]')" alt="" /> </div> </div> <!-- 原生控件 --> <input class="uploadfile" type="file" @change="fileImage" ref="filElem" style="display: none" 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>
标签:vue,自定义,上传,image,let,html5,file,data From: https://www.cnblogs.com/lingXie/p/17144720.html