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/upload@2x.png')" alt="" />
                </div>
            </div>
            <!-- 原生控件 -->
            <input class="uploadfile" type="file" @change="fileImage" ref="filElem" style="display: none" accept="image/*" />
        </section>
    </template>
    <script>
    export default {
        methods: {
            // 上传图片
            uploadImg() {// 触发一个自定义事件
                    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);
           
          　　   ...
            },
        }
    }
    </script>