el-upload 上傳 base64 圖片

el-upload 上傳 base64 圖片

​ 🎲🎲🎲

• el-upload 上傳 base64 圖片

  • 🪶 使用 el-upload 組件
  • 🪶 轉換 base64 方法使用 Promise
  • 🪶 異步調用轉換同步調用

• 代碼區域

  • 👻 頁面組件

    <template>
    	      <el-upload
    						class="avatar-uploader"
    						accept="JPG, .PNG, .JPEG,.jpg, .png, .jpeg"   // 可接收的文件格式
    						list-type="picture"   // 圖片顯示樣式
    						:headers="headers"   // 圖片上傳時攜帶的token
    						:action="url"   // 圖片上傳時地址
    						:multiple="false"   // 是否支持多選
    						:show-file-list="false"   // 是否展示文件列表
    						:http-request="uploadImg"   // 自定義上傳，會覆蓋默認上傳行為
    					>
                // 如果有圖片則顯示圖片，沒圖片顯示加號
    						<img v-if="this.imgString" :src="this.imgString" class="avatar" />
    						<i v-else class="el-icon-plus avatar-uploader-icon" size="mini"></i>
    				</el-upload>
            // 建議分開寫，否則圖片數據不一定能拿到
    				<el-button type="success" size="mini" @click="submitImg()">
              	上傳到服務器
    				</el-button>
    </template>
    

  • 👻 頁面數據

    <script>
      export default{
        data(){
          return {
            // 圖片上傳參數
    				imgString: ''
            // 圖片上傳頭部信息（如果需要token就需要攜帶頭部信息）
    				headers: {
    					Authorization: "Bearer" + getToken(),
    				},
            // 圖片上傳路徑
    				url: Cookies.get("configsapi") + "/upload",
          }
        },
        methods: {
        	// 轉換base64方法時Promise對象，必須換成同步
          // 網上還有其它辦法，但是嘗試過后，這個方法出錯的概率最低
    			async uploadImg(file) {
            // 這里不一定是file.file，如果使用的方法不一樣，有的是file.raw
            // 這里傳入的應該是組件中攜帶的文件信息
    				let base64Str = await this.getBase64(file.file);
            console.log(base64Str);
    				this.imgString = base64Str.split(',');
            console.log(this.imgString);
    			},
    			// 獲取圖片轉base64，這里用的是Promise，所以調用方法時必須轉換成同步（async，await）
          // 否則上傳數據時好時壞，能不能上傳成功全看運氣 ^_^
    			getBase64(file) {
    				return new Promise(function (resolve, reject) {
    					const reader = new FileReader();
    					let imgResult = '';
    					reader.readAsDataURL(file)
    					reader.onload = function () {
    						imgResult = reader.result;
    					}
    					reader.onerror = function (error) {
    						reject(error);
    					}
    					reader.onloadend = function () {
    						resolve(imgResult);
    					}
    				})
    			},
          // 上傳圖片到服務器
    			submitImg() {
            // 此處調用后台上傳接口
            ……
    			},
        }
      }
    </script>