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="')" 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>