Vue+elementUI 는 다 중 이미지 업로드 와 리 셋 기능 을 실현 합 니 다(리 셋 후 계속 업로드 또는 삭제 포함)
이번 에는 주로 전단 의 실현 세부 사항 을 쓰 고 백 엔 드 는 Multipart[]배열 로 받 으 면 됩 니 다.더 이상 군말 하지 않 고 인터넷 에서 많은 글 을 검색 하면 참고 할 수 있 습 니 다.
이번 에는 elementui 를 사용 하여 사진 컨트롤 을 업로드 하 는 사진 벽 형식 입 니 다.예제 를 사용 하여 공식 문 서 를 구체 적 으로 볼 수 있 습 니 다.
Elementui 다 중 그림 업로드 컨트롤
주의해 야 할 것 은 공식 문서 의 예 시 는 자동 으로 업로드 하 는 방식 을 사용 합 니 다.대부분 상황 에서 우 리 는 업로드 단 추 를 누 르 거나 폼 과 함께 제출 해 야 업로드 하기 시 작 했 습 니 다(즉 수 동 업로드).이때 공식 적 인 예 시 는 우리 의 수 요 를 만족 시 키 지 못 합 니 다.어 떡 하지?당연히 자기 손 으로 풍족 하 게 먹고 사 는 거지!!
본론 으로 들 어가 서 이 루어 진 후 및 업로드 저장 에 성공 한 후의 효 과 는 그림 과 같 습 니 다.
구현 코드
여기에 몇 가지 속성 이 있 으 니 주의해 야 한다(칠판 을 두 드 려 라!!)
이번 에는 수 동 으로 업로드 하기 때문에
action
속성 을 비 워 야 합 니 다.업로드 한 url 은 확인 을 클릭 할 때 컨트롤 에 전달 하 는 방법 입 니 다.multiple:다 중 그림 업로드 지원
auto-uproad:자동 으로 업로드 하려 면
“true”
로 설정 해 야 합 니 다.(이 유 는 다음 과 같 습 니 다)accept 는 업로드 할 수 있 는 그림 접미사(작성 후 그림 선택 단 추 를 누 르 면 브 라 우 저 는 이 접미사 에 속 하지 않 는 그림 을 걸 러 냅 니 다.여러 개의 값 이 필요 하 다 면
“,”
으로 분리 합 니 다.list-type:그림 표시 스타일,공식 문 서 를 참고 할 수 있 습 니 다.
file-list:그림 이 표 시 된 파일 목록
before-upload:업로드 전에 실행 하 는 방법,그림 의 유형,크기 등 을 확인 할 수 있 습 니 다.
http-request:이 방법 은 업로드 할 파일 대상 을 가 져 올 수 있 는
content
인 자 를 가지 고 속성content.file
을 사용 합 니 다.on-preview:그림 미리 보 기 를 실행 하 는 방법
on-exchange:그림 목록 변경 시 실행 되 는 방법 입 니 다.이 방법 은 두 개의 인 자 를 가지 고 있 습 니 다.file 은 그림 목록 에 새로 추 가 된 파일 을 표시 합 니 다.fileList 는 이 파일 목록 을 표시 합 니 다.
on-remove:그림 을 삭제 할 때 촉발 하 는 방법 을 표시 합 니 다
(file,fileList)
두 개의 인자on-exceeve:방법 은 업로드 한 목록 의 길이 가 제한 을 초과 할 때 촉발 하 는 방법 을 표시 합 니 다.전 제 는 설정 한
(file,fileList)
속성 입 니 다.이 속성 은 Number 형식 을 받 습 니 다.다음은 왜 수 동 으로 올 리 고
limit
를 트 루 로 설정 하 는 지 설명 한다.위 와 같은 before-uproad,on-exchange,on-remove 등 관건 적 인 방법 이 적용 되 려 면
”auto-upload“
을 true 로 설정 해 야 합 니 다.올 릴 사진 을 골 라 서 올 리 면 되 지 않 을까요?해 봤 는데 안 돼,why?그림 을 선택 할 때 발생 하 는 on-change 방법 에서 인쇄
”auto-upload“
인자인쇄 를 통 해 file 매개 변 수 는 우리 가 진정 으로 원 하 는 대상 이 아니 라 는 것 을 알 수 있 습 니 다.자세히 살 펴 보면 file 대상 중 에 또 하나의
file
대상 이 있 습 니 다.이때 눈앞 이 밝 아 집 니 다.이것 이 바로 우리 가 원 하 는 것 입 니 다.필자 가 사용 하 는 방법 은 업로드 방법 에서 업로드 목록 을 옮 겨 다 니 며 각 대상 의 raw 대상 을 가 져 온 다음 에 받 은 raw 대상 으로 구 성 된 list 를 배경 으로 저장 하 는 것 입 니 다
raw
대상 을 잊 지 마 세 요)다른 더 좋 은 획득 방법 이 있다 면 많은 조언 을 바 랍 니 다!!
올 려 주시 면 어떻게 올 려 요?
우 리 는 업로드 에 성공 하면 배경 에서 그림 의 url 을 우리 에 게 되 돌려 줄 것 이라는 것 을 안다.나 는 이렇게 한다:백 스테이지 하지만 회의 url 을 모 아서 file 의 집합 으로 전환한다.
그 중
Format
은 url 의 집합 이다.이렇게 하면 성공 적 으로 재생 할 수 있 고 업 로드 된 목록 에서 업 로드 된 그림 을 다시 업로드 하거나 삭제 할 수 있 습 니 다.
메모:이미 올 린 사진 은 백 엔 드 에 다시 올 릴 수 없습니다.이 럴 때 는 올 린 사진 을 걸 러 내 고 올 려 야 합 니 다.올 릴 때 그림 의 url 에'blob'가 포함 되 어 있 지 않다 고 판단 할 수 있 습 니 다.포함 되 어 있 으 면 올 릴 수 있 습 니 다.설명 이 포함 되 어 있 지 않 으 면 걸 러 내야 합 니 다.또한 업로드 순 서 를 유지 해 야 합 니 다.
총결산
Vue+elementUI 가 멀 티 이미지 업로드 와 리 플레이 기능(리 플레이 후 계속 업로드 또는 삭제 포함)을 실현 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue elementUI 다 중 이미지 업로드 리 플레이 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.