이 글은 주로 vux-uploader 이미지 업로드 구성 요소의 설치 및 사용 방법을 소개합니다. 매우 훌륭하고 참고할만한 가치가 있습니다. 도움이 필요한 친구들은 참고할 수 있습니다.
1. 웹사이트: https://github.com/greedying /vux-uploader
2.
npm install vux-uploader --save npm install --save-dev babel-preset-es2015 .babelrc { "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "es2015", "stage-2" ], "plugins": ["transform-runtime"], "env": { "test": { "presets": ["env", "es2015", "stage-2"], "plugins": ["istanbul"] } } }
3을 설치합니다.
// 引入组件 import Uploader from 'vux-uploader' // 子组件 export default { ... components: { ... Uploader, ... } ... } // 使用组件 <uploader :max="varmax" :images="images" :handle-click="true" :show-header="false" :readonly="true" :upload-url="uploadUrl" name="img" :params="params" size="small" @preview="previewMethod" @add-image="addImageMethod" @remove-image="removeImageMethod" ></uploader>
을 사용합니다. 매개변수 설명:
images
관련 추천:
기본값: [], 빈 배열
의미: [{ url: '/url/of/img.ong' }, ...] 형식의 이미지 배열
참고: 변수가 배열인 경우 데이터 흐름은 양방향이며 값이 변경됩니다. 구성 요소 내의 배열은 상위 구성 요소에 영향을 줍니다
max
유형: 숫자
기본값: 1
의미: 최대 사진 수
참고: 사진이 최대 값에 도달하면 새 버튼이 사라집니다
showHeader
유형: 부울
기본값 값: true
의미: 헤더 표시 여부
비고: 전체 헤더 표시 제어
title
유형: 문자열
기본값: 이미지 업로드
의미: 헤더 제목
비고: 표시되지 않으면 공백으로 두세요
showTip
유형: Boolean
기본값: true
의미: 헤더의 디지털 부분, 즉 1/3 부분을 표시할지 여부
비고: showHeader가 false인 경우 헤더가 전체적으로 숨겨지며 이 매개변수는 현재 유효하지 않습니다
readonly
유형: Boolean
기본값: false
의미: 읽기 전용인지 여부
비고: 읽기 전용일 경우 추가 및 삭제 버튼이 숨겨집니다
handleClick
유형: Boolean
기본값: false
의미: 새 버튼의 클릭 이벤트를 인수할지 여부. 그렇다면 새 버튼을 클릭해도 더 이상 이미지 선택 인터페이스가 자동으로 표시되지 않습니다
비고: true인 경우 추가 버튼을 클릭한 다음 $emit('add- image'), 이 이벤트 내에서 이미지 선택과 같은 사용자 정의 작업을 수행할 수 있습니다. 그 이후에는 이미지 추가, 업로드 및 삭제가 사용자에 의해 인계됩니다
autoUpload
유형: Boolean
기본값: true
의미: 이미지 선택 후 자동으로 업로드할지 여부입니다. 그렇다면 내부 업로드 인터페이스가 호출됩니다. 아니요, 그렇다면 $emit('upload-image', formData)', formData`는 이미지 콘텐츠이므로 사용자가 이벤트를 듣고 직접 업로드할 수 있습니다
참고: handlerClick이 true인 경우 이미지 선택을 수행할 수 없으므로 이 매개변수는 유효하지 않습니다. 이 매개변수가 false인 경우 이미지를 선택한 후 $emit('upload-image', formData)', formData`가 이미지 내용입니다
uploadUrl
유형: 문자열
기본값: ''
의미: 해당 이미지의 URL을 받습니다. 업로드된 이미지
비고 : json 문자열을 다음 형식으로 반환해야 합니다. 그렇지 않으면 autoUpload를 false로 설정하고 직접 업로드하세요
image.url.com/image.png"
}
}
name
유형: 문자열
기본값 값: img
의미: 기본적으로 업로드 시 이미지에 사용되는 양식 이름
비고: 없음
params
유형: Object
기본값: null
의미: 파일 업로드 시 매개변수 전달
비고: 없음
size
유형: 문자열
기본값: 일반
의미: 크기 유형
비고: 일반은 weui의 기본 크기이고, 소형은 작성자가 정의한 더 작은 크기입니다.
캡처
유형: 문자열
기본값: ''
의미: 입력의 캡처 속성
참고: 이때 추가 버튼을 클릭하면 카메라가 직접 활성화됩니다. 휴대폰 모델마다 다르게 작동하므로 주의하시기 바랍니다. handlerClick이 true인 경우 이 속성은 유효하지 않습니다.
방출 이벤트 설명
add-image
방출 타이밍: handlerClick 매개변수가 true인 경우 새 버튼을 클릭합니다.
매개변수: None
비고: none
remove-image
방출 타이밍: handlerClick 매개변수 true인 경우 삭제 버튼을 클릭합니다.
매개변수: 없음
비고: handlerClick이 false인 경우 삭제 버튼을 클릭하면 구성 요소 내에서 첫 번째 그림이 삭제됩니다. 그렇지 않으면 사용자는 이 이벤트를 듣고 다음을 수행해야 합니다. 해당 삭제 작업
preview
방출 타이밍: 사진을 클릭할 때
매개변수: { url: 'imgUrl' }
형식의 이미지 객체 참고: 자동 미리보기 기능은 아직 구현되지 않았습니다. 사용자가 이벤트를 모니터링해야 하는 경우. 자체적으로 구현할 수 있습니다
upload-image
방출 타이밍: handlerClick 및 autoUpload가 모두 false인 경우 이미지를 선택합니다.
매개변수: 이미지 콘텐츠에서 생성된 formData, formData
참고: vm을 통해 이미지의 입력 요소를 가져올 수 있습니다. $refs.input
위 내용은 이 글의 전체 내용이며, 모든 분들께 도움이 되었으면 좋겠습니다. 학습에 도움이 되는 내용은 PHP 중국어 홈페이지를 주목해주세요!
Vue에는 고정 테이블 헤더와 첫 번째 열을 구현하는 여러 가지 방법이 있습니다
vue-cli 프로젝트에서 모의 데이터를 사용하는 방법
위 내용은 vux 업로더 이미지 업로드 구성 요소 설치 및 사용 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!