vue+html5实现上传图片

原理: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>