vux 업로더 이미지 업로드 구성 요소 설치 및 사용 정보

이 글은 주로 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에서 v-bind 사용법 소개

vue-cli 프로젝트에서 모의 ​​데이터를 사용하는 방법

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