移動端檔案、圖片及拍照上傳

需求：移動端點選圖片觸發上傳圖片或檔案或拍照上傳。
檔案上傳

        <a>
          <input type="file" ref="file" hidden @change="onInputChange('file')" />
          <img src="@/assets/images/uploading-link.png" @click="triggerUpload('file')" />
        </a>

首先設定hidden屬性隱藏一個input，input的type屬性設定為檔案，通過img標籤的@click事件觸發input。

 //點選圖片觸發檔案上傳
 triggerUpload(type) {
      let _this = this;
      if (this.fileList.length >= this.limit) {                        //設定上傳數量限制
        alert("檔案上傳數量超出限制");
        return false;
      } else {
            this.$refs.file.click();
        }
    },

 //檔案上傳到瀏覽器觸發事件
    onInputChange(item) {
      let _this = this;
    if (item == "file") {
        let file = this.$refs.file.files[0];
        if (file.size > this.size) {                                            //設定檔案大小限制
          alert("檔案太大無法上傳");
          return false;
        }
        _this.fileUpload(file, "file");                                        //觸發上傳事件
    },

  //檔案上傳
    fileUpload(file, type) {
      let _this = this;
      let form = new FormData();
      let url = _this.url;
      //獲取當前token
      let token = "Bearer " + window.localStorage.getItem("access_token");
      let myHeaders = { Authorization: token };
      //更新檔案取消上傳的source
      source = CancelToken.source();
      form.append("file", file);
      Axios.post("/檔案上傳介面", form, {
        cancelToken: source.token,
        headers: myHeaders,
      })
        .then((res) => {
          _this.onSuccessDefault(res, file, type);                     //上傳成功執行成功回撥函式
        })
        .catch(function (error) {
          if (Axios.isCancel(error)) {
            console.log("Request canceled", error.message);
          }
          _this.onErrorDefault(error);
        });
    },
  //預設執行的上傳成功回撥函式
    onSuccessDefault(res, file, type) {
       var _this = this;
      console.log("file:", file);
      if (res.data.code == "000000") {
        _this.$Message.success("上傳成功！");
        var fileInfo = {
          fileName: res.data.resultBody.fileName,
          opTime: res.data.resultBody.optime,
          filePath: res.data.resultBody.ftpUrl,
          fileSize: (file.size/1024).toFixed(2)+"KB",                              
        };
        _this.fileList.push(fileInfo);
      } else {
      };
    },
  //預設異常執行邏輯
    onErrorDefault(error) {
      console.log("error", error);
      this.$Message.error("上傳失敗");
    },

最後將fileList和表單一起提交。

圖片上傳和拍照上傳
過程與檔案上傳相同，圖片上傳設定 accept=“image/"，拍照上傳設定 accept="image/” 外，設定 capture="camera"來觸發移動端拍照上傳。

<a>
          <input type="file" ref="photo" hidden @change="onInputChange('photo')" accept="image/*" />
          <img src="@/assets/images/uploading-img.png" @click="triggerUpload('photo')" />
        </a>
  <a>
          <input  type="file" accept="image/*"  hidden capture="camera" @change="onInputChange('cameraPhoto')" ref="cameraPhoto"  />
          <img src="@/assets/images/uploading-photo.png" @click="triggerUpload('cameraPhoto')" />
        </a>