技術標籤：javascriptvuecssjs

前端上傳業務

• 一、基礎upload元件
• • 1.UI設計
  • 2.js設計
• 二、上傳圖片相關
• • 1. 限制類型與大小
  • 2.具體限制圖片的長寬
  • 3.展示上傳進度條
• 總結
• • 1.與表單結合時要考慮上傳不可點選，點選不可上傳
  • 2.展示進度條可以通過callback改變元件內的引數

一、基礎upload元件

1.UI設計

   <div>
      <button
        @click="openFilePicker"
      >Upload</button>
      <a
        download=
 
"downloadTemplate"
        :href="downloadTemplate"
      >Download Template</a>
      // accept屬性是一個字串，它定義了檔案 input 應該接受的檔案型別。 這個字串是一個以逗號為分隔的列表
      // multiple決定是否可以顯示多個
      // value屬性包括了一個 DOMString，表示已選擇檔案的路徑。如果使用者選擇了多個檔案，則 value 表示他們選擇的檔案列表中的第一個檔案。為了阻止惡意軟體猜測檔案路徑，字串以C:\fakepath\ 為字首。
 

      <input
        ref="file"
        type="file"
        name="shopee-ids"
        accept=".doc,.docx,.csv"
        @change="handleFileChange"
      />
    </div>
    <div class="upload-footer" v-if="file.id">
      Last uploaded file:
 
 {{file.file_name}}
      <a
        style="vertical-align: top; margin-left: 24px"
        download="download"
        class="export-link"
        :href="exportFile(file.id)"
      >Export</a>
    </div>
  </div>

頁面效果如下

2.js設計

private openFilePicker() {
   this.$refs.file.click();
}

private async handleFileChange(event: InputEvent) {
	//files為input元素的檔案陣列，含有name，lastModified，lastModifiedDate，size，type
    const file = this.$refs.file.files[0];
    // 如果不含有下面這一步則兩次選擇同一檔案沒有任何頁面反應
    this.$refs.file.value = "";
    //若為表單則上傳時不可提交
    //this.changeUploadStatus = true;
    try {
      const { file_info } = await uploadShopIdsFile(file);
    } catch (e) {
	  console.log(e);
    } finally {
     // this.changeUploadStatus = false;
    }
  }

二、上傳圖片相關

1. 限制類型與大小

function getBase64(img, callback) {
  const reader = new FileReader();
  reader.onload = () => callback(reader.result));
  // 兩種寫法均可
  // reader.onload = ( e ) => callback(e.target.result));
  reader.readAsDataURL(img);
}

function beforeUpload(file) {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    console.log('You can only upload JPG/PNG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    console.log('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
}

2.具體限制圖片的長寬

	const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
    	//可以獲得具體的圖片
        const image = new Image();
        image.src = reader.result;
        image.onload = () => {
          const width = image.width;
          const height = image.height;
          ...
        };
    };

3.展示上傳進度條

public async uploadImage(file, callback){
      const formData = new FormData();
      formData.append('file', file);
      return this.api.miscRequest.post('/lalala', formData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
        onUploadProgress(e: any) {
          if (e.total > 0) {
            e.percent = Math.floor(e.loaded / e.total * 100);
          }
          callback(e.percent);
        }
      });
  }

private changePercentage(value: number) {
   this.percentage = value;
}

總結

1.與表單結合時要考慮上傳不可點選，點選不可上傳

2.展示進度條可以通過callback改變元件內的引數