About the installation and use of vux uploader image upload component

This article mainly introduces the installation and use of the vux-uploader image upload component. It is very good and has certain reference value. Friends in need can refer to it

1. Website: https:/ /github.com/greedying/vux-uploader

2.Install

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.Use

// 引入组件
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>

Parameter description:

images
Type: Array
Default value: [], Empty array
Meaning: Image array, format is [ { url: '/url/of/img.ong' }, ...]
Note: When the variable is an array, the data flow is bidirectional, inside the component Changing the value of the array affects the parent component
max
Type: Number
Default value: 1
Meaning: Maximum number of pictures
Note: When the picture reaches the max value, the new button disappears
showHeader
Type: Boolean
Default value: true
Meaning: Whether to display the header
Remarks: Control the display of the entire header
title
Type: String
Default value : Image upload
Meaning: Title of the header
Remarks: Leave blank if not displayed
showTip
Type: Boolean
Default value: true
Meaning: Whether to display the digital part of the header , that is, 1/3 part
Note: When showHeader is false, the header is hidden as a whole, and this parameter is invalid.
readonly
Type: Boolean
Default value: false
Meaning: Whether it is only Read
Note: When read-only, the add and delete buttons are hidden
handleClick
Type: Boolean
Default value: false
Meaning: Whether to take over the click event of the new button, if so, Clicking the Add button will no longer automatically appear the image selection interface
Note: When true, click the Add button, then $emit('add-image'), you can perform customized image selection and other operations within this event, thereafter The addition, uploading and deletion of pictures are all taken over by the user
autoUpload
Type: Boolean
Default value: true
Meaning: Whether to automatically upload the picture after selecting it. If yes, the internal upload interface is called. No, then $emit('upload-image', formData)',formData` is the image content, and the user can listen to the event and upload it himself
Note: When handleClick is true, image selection cannot be performed, so this parameter is invalid. When this parameter is false, after selecting the image, $emit('upload-image', formData)', formData` is the image content
uploadUrl
Type: String
Default value: ''
Meaning : Receive the url of the uploaded image
Note: You need to return the json string in the following format, otherwise please set autoUpload to false to upload it yourself
Error message",
data: {
url: "http://image.url.com/image.png"
}
}
name
Type: String
Default value: img
Meaning: When uploading by default, the form name
used for images Remarks: None
params
Type: Object
Default value: null
Meaning: Upload file Parameter
Remarks: None
size
Type: String
Default value: normal
Meaning: Size type
Remarks: normal is the default size of weui, small is the size defined by the author Some sizes
capture
Type: String
Default value: ''
Meaning: input capture attribute
Note: Can be set to camera, click the new button at this time, some models The camera will be launched directly. Note that the performance of each model of mobile phone is different, so please use it with caution. When handleClick is true, this attribute is invalid
emit event description
add-image
Emit timing: When the handleClick parameter is true, click the new button
Parameters: None
Remarks: None
remove-image
Emit timing: When the handleClick parameter is true, click the delete button
Parameters: None
Note: When handleClick is false, click the delete button and the first image is deleted inside the component; Otherwise, the user needs to listen to this event and perform the corresponding deletion operation
preview
Emit timing: When clicking any picture
Parameters: Picture object, the format is { url: 'imgUrl' }
Note: The automatic preview function has not been implemented for the time being. If users need to monitor events, they can implement it themselves
upload-image
emit timing: When both handleClick and autoUpload are false`, select the image
Parameters: formData, generated from the image content formData
Note: You can get the input element of the image through vm.$refs.input

The above is the entire content of this article. I hope it will be helpful to everyone's learning. More related Please pay attention to the PHP Chinese website for content!

related suggestion:

Vue has multiple methods to implement fixing of table headers and first columns

Introduction to the usage of v-bind in VUE

How to use mock data in the vue-cli project

The above is the detailed content of About the installation and use of vux uploader image upload component. For more information, please follow other related articles on the PHP Chinese website!