Vux-uploader Picture Upload Component

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

2. Installation

NPM Install vux-uploader--savenpm 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

Importing components import Uploader from ' Vux-uploader '//Sub  -  components export Default {... Components: {    ...    Uploader,    ...  }  ...} Using Component <uploader  : max= "Varmax"  : images= "Images"  : handle-click= "true"  : Show-header= "false"  : Readonly= "true"  : Upload-url= "Uploadurl"  name= "img"  :p arams= "params"  size= "small"  @preview = "Previewmethod"  @add-image= "Addimagemethod"  @remove-image= "Removeimagemethod" >< /uploader>

Parameter description:

Images type: Array default: [], empty array meaning: image array, format [{url: '/url/of/img.ong '}, ...] Note: When a variable is an array, the data flow is bidirectional, and changing the value of the array within the component affects the parent component Max Type: Number default: 1 meaning: Picture max count Note: The New button disappears when the picture reaches Max value Showheader type: Boolean default: T Rue meaning: Whether to show head notes: Control the display of the entire head title type: String default: The image upload meaning: header note: The title of the head notes are blank Showtip type: Boolean default value: True meaning: whether the display Head number part, 1/3 part note: When Showheader is false, the header is hidden as a whole, this argument is invalid readonly type: Boolean default: False meaning: Read-only note: Add and Remove buttons hidden hand Leclick type: Boolean default: false meaning: Whether to take over the click event of the New button, if yes, click the New button no longer automatically appear select Picture interface notes: True, click the New button, then $emit (' Add-image '), you can do in this event Custom selection of pictures, and so on, the new, uploaded, deleted by the user to take over autoupload type: Boolean default: True meaning: Whether the image is automatically uploaded after selecting it. Yes, the internal upload interface is called. No, then $emit (' Upload-image ', FormData) ', FormData ' for the picture content, the user can listen to the event himself upload notes: Handleclick is true, cannot make the picture selection, therefore the parameter is invalid. When this parameter is False, when the picture is selected, the $emit (' Upload-image ', FormData) ', FormData ' is the picture content Uploadurl type: String default: ' Meaning: Receive URL to upload image note: You need to return the following      Format JSON string, otherwise set Autoupload to False self-upload {result:0, message: "Result is not error message at 0", data: {  URL: "Http://image.url.com/image.png"}}name Type: String default: img Meaning: The default upload, the picture used by the form name Note: No params type: O Bject default value: null meaning: Carry parameters When uploading a file note: No size type: String default: Normal meaning: Dimension type Note: Normal is weui default size, small is the smaller size defined by the author Captur E Type: String default: "Meaning: Input capture attribute Note: Can be set to camera, click the New button, some models will directly adjust the camera, note that each model phone performance is different, please use with caution. When Handleclick is true, this property is invalid emit event description Add-image emit timing: When the Handleclick parameter is true, click the New button parameter: No comment: No remove-image emit time: when handle Click the Delete button when the Click parameter is true: No note: When Handleclick is false, click the Delete button to delete the first image inside the component; otherwise, the user needs to listen to this event and delete it accordingly. Preview emit timing: Click on any one of the picture parameters: Picture object, Format {url: ' Imgurl '} Note: Temporarily does not implement automatic preview function, if you need user monitoring event self-implementation upload-image emit time: Handleclick and Autoupload are False ', select the picture parameter: formData, image content generated FormData Note: You can use the VM. $refs. Input to get the input element of the picture

.

Vux-uploader Picture Upload Component