<EL- 업로드 클래스 = "업로드-데모" // 클래스 스타일의 액션 = "https://jsonplaceholder.typicode.com/posts/" // 파일 업로드의 대상 경로 : ON-미리보기 = "handlePreview" // 클릭 미리보기는 사진 링크 미리보기를 클릭하면 작업이 트리거 제거 = "handleRemove"- 더 ON : // 를 제거 할 때 이벤트가 트리거 될 파일 목록 = "fileList2": // 파일 목록은 현재 사용자가 선택한 늦게 목록 데이터가 서버에 업로드되는 유형 = "화상"목록-의 // 유형 > 유형 = "차"의 <크기 = EL-버튼 "작은"> 클릭 업로드 </ EL-버튼> <DIV 슬롯 = "팁"클래스 = " 엘 upload__tip ">당신은 500킬로바이트 이상의 JPG / PNG 파일, 그리고 더 많은 업로드 할 수 있습니다 </ DIV> </ EL-업로드>
인터페이스 업로드 주소 : 작업 :
파일 업로드 파일 업로드 구성 요소를 사용하여
-
-
지정된 속성 goodsForm에 저장된 지정된 데이터 값을 반환합니다 : 사진을
-
사진 매개 변수의 인터페이스 문서 형식 설명 서명
-
파일 업로드는 내부 패키지 구성 요소 비동기 작업을 업로드
-
우리 자신의 패키지 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) }) }
렌더링 :
还添加了导航守卫,路由请求之前都会经过这个导航守卫,判断有没有token值,如果有就next(),否则 next({ name: 'Login' })
如果您喜欢这篇文章,可以打赏点钱给我 :)
支付宝 微信