vux 업로더 이미지 업로드 구성 요소를 사용하는 방법-JS 튜토리얼-php.cn

vux 업로더 이미지 업로드 구성 요소를 사용하는 방법

php中世界最好的语言

풀어 주다： 2018-05-29 17:29:35

원래의

2977명이 탐색했습니다.

이번에는 vux uploader 이미지 업로드 컴포넌트 사용법과 vux uploader 이미지 업로드 컴포넌트 사용 시 주의사항에 대해 설명하겠습니다. 다음은 실제 사례입니다.

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 &#39;vux-uploader&#39;
// 子组件
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 비고: noneremove-image
방출 타이밍: handlerClick 매개변수 true인 경우 삭제 버튼을 클릭합니다.
매개변수: 없음
비고: handlerClick이 false인 경우 삭제 버튼을 클릭하면 구성 요소 내에서 첫 번째 그림이 삭제됩니다. 그렇지 않으면 사용자는 이 이벤트를 듣고 다음을 수행해야 합니다. 해당 삭제 작업
preview
방출 타이밍: 사진을 클릭할 때
매개변수: { url: 'imgUrl' }
형식의 이미지 객체 참고: 자동 미리보기 기능은 아직 구현되지 않았습니다. 사용자가 이벤트를 모니터링해야 하는 경우. 자체적으로 구현할 수 있습니다
upload-image
방출 타이밍: handlerClick 및 autoUpload가 모두 false인 경우 이미지를 선택합니다.
매개변수: 이미지 콘텐츠에서 생성된 formData, formData
참고: vm을 통해 이미지의 입력 요소를 가져올 수 있습니다. $refs.input

이 글의 사례 등을 읽으신 후 방법을 마스터하셨다고 믿습니다. 얼마나 흥미진진한지, PHP 중국어 웹사이트의 다른 관련 글도 주목해 주세요!

추천 도서:

WeChat 애플릿 입문 튜토리얼 + 사례에 대한 자세한 분석