백엔드 뷰 전기 공급 관리 시스템 프로젝트 7 부 - 파일 업로드 컴포넌트 및 서식있는 텍스트 상자

파일 업로드 컴포넌트

<EL- 업로드 
           클래스 = "업로드-데모" // 클래스 스타일의 
           액션 = "https://jsonplaceholder.typicode.com/posts/" // 파일 업로드의 대상 경로 
           : ON-미리보기 = "handlePreview" // 클릭 미리보기는 사진 링크 미리보기를 클릭하면 작업이 트리거 
           제거 = "handleRemove"- 더 ON : // 를 제거 할 때 이벤트가 트리거 될 
           파일 목록 = "fileList2": // 파일 목록은 현재 사용자가 선택한 늦게 목록 데이터가 서버에 업로드되는 
           유형 = "화상"목록-의 // 유형 
           > 
    유형 = "차"의 <크기 = EL-버튼 "작은"> 클릭 업로드 </ EL-버튼> 
    <DIV 슬롯 = "팁"클래스 = " 엘 upload__tip ">당신은 500킬로바이트 이상의 JPG / PNG 파일, 그리고 더 많은 업로드 할 수 있습니다 </ DIV> 
</ EL-업로드>

인터페이스 업로드 주소 : 작업 : HTTP : // localhost를 : 8888 / API / 개인 / V1 / 업로드

파일 업로드 파일 업로드 구성 요소를 사용하여

성공적으로 업로드의 반환 값을받은 후
지정된 속성 goodsForm에 저장된 지정된 데이터 값을 반환합니다 : 사진을
사진 매개 변수의 인터페이스 문서 형식 설명 서명

자세한 사항 1 : 토큰 전달

파일 업로드는 내부 패키지 구성 요소 비동기 작업을 업로드
우리 자신의 패키지 Axios의를 사용하기 전에 그런 의미하지 않는다
우리는 추가하는 것을 의미하기 전에 자신의 인터셉터는 역할을 할 수 없습니다
그것은 우리가 실제로 사용하지 않은 인터셉터의 패스 토큰 값을 설정하는 것이 의미
결론 : 우리는 수동으로 토큰 값을 추가 통과해야
패스 토큰 값은 요청 헤더 통과

요청 헤더해야 권한이 부여 전송 : 토큰 로컬 스토리지 요청 헤더를 설정 :, 토큰 획득 요청 헤더를 운반 성분 헤더를 설정한다;

= 액션 "HTTP : // localhost를 : 8888 / API / 개인 / V1 / 업로드" 
----------------------- // 설정 요청 헤더 전송 토큰 getToken에 () {
     var에 토큰 = localStorage.getItem ( 'itcast_pro_token' )
     반환에게 { '권한 부여' : 토큰} 
}

상세 2 : 당신은 제거 사진에서 개체를 제거하기 전에 사진을 추가해야합니다

// 제거 
{handleRemove (파일,는 Filelist를)
     // 파일이 파일의 제거 전류 
    var에 파일 이름 = file.response.data.tmp_path
     // 우리가 파일에 따라 this.goodsForm.pics에게 데이터 내부의 데이터를 제거 할 
    에 대한 ( VAR의 I = 0; I <는 이 본 .goodsForm.pics.length를, I는 ++ ) {
         IF ( 이 본 .goodsForm.pics [I] .PIC === 파일명) {
             이 본 .goodsForm.pics.splice (I 1 ,. )
             BREAK 
        } 
    } 
}

서식있는 텍스트 상자 플러그인 사용

다운로드 및 설치 : NPM VUE - 퀼 편집기를 설치 --save

의 도입 플러그인 서식있는 텍스트 상자

등록 구성 요소

'VUE - 퀼 편집기'에서 수입 VueQuillEditor

수입 '퀼 / DIST / quill.core.css' 
수입 '퀼 / DIST / quill.snow.css' 
수입 '퀼 / DIST / quill.bubble.css' 

Vue.use (VueQuillEditor)

서식있는 텍스트 상자 플러그인을 사용하여

<엘 탭 창 라벨 = "商品描述"이름 = "2"> 
    <퀼 편집기의 V-모델 = "내용"REF = "myQuillEditor"옵션 = "editorOption"스타일 = '높이 : 300 픽셀'> </ 퀼 편집기> 
</ 엘 - 탭 창>

제품 정보 추가

이벤트를 바인딩하는 상품을 추가 할 수있는 버튼 버튼을 추가;

// 添加商品信息
addGoods () { 
    CONSOLE.LOG ( 이 .goodsForm) 
    addGoodsInfo ( 이 .goodsForm) 
        그 때는 (입술 => { 
        CONSOLE.LOG (고해상도) 
        의 경우 (res.data.meta.status === 201 ) {
             이 $ 메시지 ({. 
                유형 : '성공' , 
                메시지 : res.data.meta.msg 
            }) 
            이 . $의 router.push ({이름 : '목록' }) 
        } 
    }) 
        . 캐치 (ERR => { 
        CONSOLE.LOG (ERR) 
    }) 
}