vux uploader image upload component usage tutorial

This time I will bring you a tutorial on how to use the vux uploader image upload component. What are the precautions when using the vux uploader image upload component? Here are practical cases, let’s take a look.

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

2. Installation

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, the format is [ { url: '/url/of/img.ong' }, ...]
Note: When the variable is an array, the data flow is bidirectional. Changing the value of the array within the component affects the parent component
max
Type: Number
Default value: 1
Meaning : Maximum number of pictures
Remarks: 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, the 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 to read-only
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 new button will no longer automatically appear the image selection interface
Note: When true, click the new button, then $emit( 'add-image'), you can perform customized operations such as selecting images within this event. After that, the addition, uploading, and deletion of images are 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 and upload it yourself
{
 Result: 0,
 message: "Error message when result is not 0",
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: Parameter
is carried when uploading files Remarks: None
size
Type: String
Default value: normal
Meaning: Size type
Remarks: normal is the default size of weui, small is the smaller size defined by the author
capture
Type: String
Default value: ''
Meaning: input's capture attribute
Remarks: Can be set to camera, click the Add button at this time, and some models will directly bring up the camera. 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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website !

Recommended reading:

Detailed explanation of how to use the $http service in AngularJS

vue addRoutes Detailed explanation of the steps to implement dynamic permission routing menu

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