vux 업로더 이미지 업로드 구성 요소 사용 튜토리얼

이번에는 vux Uploader 이미지 업로드 컴포넌트 사용법에 대한 튜토리얼을 가져오겠습니다. 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"]
  }
 }
}

설치

// 引入组件
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
유형: Array
기본값: [], 빈 배열
의미: [ { url: '/url/of/img.ong' }, ...]
형식의 이미지 배열 비고: 변수 데이터 흐름이 양방향인 경우 구성 요소 내의 배열 값을 변경하면 상위 구성 요소에 영향을 미칩니다
max
유형: 숫자
기본값: 1
의미: 최대 사진 수
비고: 사진이 배열에 도달하면 max 값이면 새 버튼이 사라집니다
showHeader
유형: Boolean
기본값: 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을 받습니다. 업로드된 이미지
비고: jsonstring을 다음 형식으로 반환해야 합니다. 그렇지 않으면 autoUpload를 false로 설정하고 직접 업로드하세요
                                                           json http://image.url.com/image.png"
}}}
name 유형: 문자열 기본값: IMG
의미: 기본적으로 업로드될 때 양식 이름
참고: 아니요
Params
유형: Object
기본값: null
의미: 파일 업로드 시 매개변수 전달
비고: 없음
size
유형: 문자열
기본값: 일반
의미: 크기 유형
비고: 일반은 weui의 기본 크기이고, 소형은 작성자가 정의한 크기입니다. 일부 크기
capture
유형: 문자열
기본값: ''
의미: 입력의 캡처 속성
참고: 이때 새 버튼을 클릭하면 일부 모델은 카메라를 직접 활성화합니다. 휴대폰은 모델마다 다르게 작동하므로 주의해서 사용하세요. 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 중국어 웹사이트의 다른 관련 글도 주목해 주세요!

추천 도서:

AngularJS에서 $http 서비스를 사용하는 방법에 대한 자세한 설명

vue addRoutes 동적 권한 라우팅 메뉴 구현 단계에 대한 자세한 설명

위 내용은 vux 업로더 이미지 업로드 구성 요소 사용 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!