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>