VueQuillEditor 부 텍스트 업로드 그림(base 64 가 아 닌)

머리말
이 글 은vue-quill-editor사진 을 올 리 는 일 을 소개 할 것 이다.일반적으로 우리 데이터베이스 에 사진 경 로 를 저장 하기 때문에 사진 을 올 린 후에 하나의 경 로 를 전단 에 전송 해 야 한다.이것 이 야 말로 완전한 업로드 절차 이다.
첫 번 째 단계:그림 업로드,두 번 째 단계:서버 에 저장 하고 생 성 경 로 를 데이터베이스 에 저장 합 니 다.세 번 째 단계:전단,배경 그림 경로,전단 에 그림 을 표시 합 니 다.
본 고 는element-ui구 조 를 사용 하여 내 가 전단 전시 업 무 를 완성 하 는 데 도움 을 주 었 다.
사진 업로드
사진 을 올 리 는 방법 도 몇 가지 가 있다.예 를 들 어file컨트롤 을 직접 사용 하여 지 정 된 주소 에 올 리 거나 봉 인 된 업로드 단 추 를 통 해 사진 을 올 리 는 것 이다.base64백 스테이지 에 올 리 려 면 사진 의 원래 형식 으로 돌아 가 저장 해 야 하고 바 이 너 리 그림 흐름 이 라면 서버 에 직접 전송 하면 된다.
나 는element-ui프레임 워 크 의el-upload구성 요 소 를 사용 하여 업로드 하 였 으 며,이 구성 요 소 는 숨겨 져 있어 서 표시 되 지 않 습 니 다.

<el-upload
      class="avatar-uploader"
      :action="articleImgUrl"
      name="img"
      :headers="headerObj"
      :show-file-list="false"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :before-upload="beforeUpload">
      </el-upload>

상기 매개 변수 설명:
(1)클 라 스 가 구성 요 소 를 업로드 하 는 스타일 도 이 구성 요 소 를 찾 는 데 사용 할 수 있 습 니 다.
(2)action 전송 값,필수 매개 변수,업로드 주소
(3)name 파일 필드 이름 을 업로드 합 니 다.백 엔 드 에서 파일 을 가 져 올 때 이름 을 지어 야 합 니 다.이 이름 은 여기 서 정의 합 니 다.
(4)headers 는 업로드 요청 머리 를 설정 합 니 다.
(5)show-file-list 업로드 한 파일 목록 을 표시 할 지 여부 입 니 다.표시 되 지 않 습 니 다.
(6)on-success 파일 업로드 에 성 공 했 을 때의 갈고리 가 성공 하면 그림 주 소 를 되 돌려 주 고 그림 을 표시 하면 src 를 주소 로 보 냅 니 다.
(7)on-error 파일 업로드 실패 시 갈고리
(8)before-uproad 가 파일 을 업로드 하기 전의 갈고리,인 자 는 업 로드 된 파일 입 니 다.false 로 돌아 가 거나 Promise 로 돌아 가 reject 되면 업 로드 를 중단 합 니 다.
나 는 먼저 부 텍스트 를 감청 하고 사진 업로드 단 추 를 누 르 는 사건 이 필요 하 다.

editorOption: {
    scrollingContainer: '#editorcontainer',
    placeholder: '',
    // or 'bubble'
    theme: 'snow',
    modules: {
     imageResize: {
      displayStyles: {
       backgroundColor: 'black',
       border: 'none',
       color: 'white'
      },
      modules: ['Resize', 'DisplaySize', 'Toolbar']
     },
     toolbar: {
      //    
      container: toolbarOptions.toolbarOptions,
      handlers: {
       'image': function (value) {
        if (value) {
         // upload      
         document.querySelector('.avatar-uploader input').click()
        } else {
         this.quill.format('image', false)
        }
       }
      }
     }
    }
   },

위의 코드 중toolbar에 있 는handlers은 바로 그림 단 추 를 누 르 는 사건 을 감청 한 다음 에 우 리 는el-upload구성 요 소 를 모 의 클릭 하면 파일 을 선택 하 는 상자 가 팝 업 됩 니 다.우 리 는 파일 을 선택 하여 업로드 하기 시 작 했 습 니 다.
백 엔 드 에서 그림 을 처리 한 후에 우 리 는 리 턴 주 소 를 받 아 부 텍스트 커서 에 탭 을 삽입 합 니 다img.

//     
  uploadSuccess(res) {
   var dt = res.result
   let quill = this.$refs.myQuillEditor.quill
   //       
   if (dt.meta.status === this.GLB.IMAGE_ADD_SUCCESS && dt.url !== null) {
    //         
    let length = quill.getSelection().index
    //      dt.url           
    quill.insertEmbed(length, 'image', this.glAPI + dt.url)
    //        
    quill.setSelection(length + 1)
   } else {
    this.$message.error('      ')
   }
   // loading    
   this.quillUpdateImg = false
  },

파트너 가 네 이 티 브 태그 사용input태그file유형 을 좋아한다 면JavaScript또는jQuery응답 클릭 이벤트 로 파일 을 보 내 도 됩 니 다!
총결산
사진 을 올 리 는 것 은 간단 한 과정 이지 만 앞 뒤 가 맞 춰 먹 어야 맛 이 정통 하 다.그래서 전단 만 배 우 는 파트너 는 백 엔 드 를 찾 아 인 터 페 이 스 를 개발 하고 주 소 를 돌려 주거 나 아예 스스로 가 짜 를 만들어 도 된다.
나 는 처음에 그림 이 어떻게 전 달 됐 는 지 잘 몰 랐 다.예 를 들 어 base 64 가 무엇 인지 사실은 사진 의 문자열 이 었 다.이 문자열 은 바로 사진 이 었 다.어떤 때 는 이 base 64 문자열 을 데이터베이스 에 저장 하 는 것 이 있 을 수 있 었 다.그러나 대부분의 경우 우 리 는 데이터베이스 에 경 로 를 저장 하기 때문에 그림 경 로 를 저장 하고 싶 은 젊은이 들 이 많 습 니 다.상기 코드 를 참고 할 수 있 습 니 다.다음 편 은 자바 와 결합 하여 그림 에 저 장 된 코드 가 어떻게 실현 되 고 그림 주 소 를 어떻게 전달 하 는 지 보 여 드 리 겠 습 니 다.기대 하 세 요!!
VueQuillEditor 부 텍스트 업로드 이미지(base 64 가 아 닌)에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 VueQuillEditor 부 텍스트 업로드 이미지 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!