vue2.0 custom picture Upload (UpLoader) component

1. Custom Components

Uploader.vue

<!--upload Picture component--><template> <div class= "Vue-uploader" > <!--Add pictures and display effects--<div class= "F Ile-list "> <!--Picture List files--<section v-for=" (file, index) of the files "class=" File-item draggable-it Em ">  <p class= "file-name" >{{file.name}}</p> <span class= "file-remove" @click = "Remove (index)" & Gt;+</span> </section> <!--Add Picture button--<section v-if= "status = = ' Ready '" class= "file-i Tem "> <div @click =" Add "class=" Add "> <span>+</span> </div> </sec      Tion> </div> <!--upload pictures operation and display process--<section v-if= "Files.length! = 0" class= "Upload-func" > <!--upload Progress-<div class= "Progress-bar" > <section v-if= "uploading": width= "(percent * 100) + '% ' ">{{(percent *) + '% '}}</section> </div> <!--action Button-<div class= "Operation-box" > <button v-if= "status = = ' Ready '" @click = "Submit" > Upload &lt ;/button> <button v-if= "status = = ' finished '" @click = "finished" > Complete </button> </div> &lt  ;/section> <!--call Camera/gallery ref= "file" to specify DOM node--<input type= "file" accept= "image/*" @change = "filechanged"  ref= "File" multiple= "multiple" > </div></template><script> export Default {props: {src: { Background Accept image HTTP address type:string, required:true}}, data () {return {status: ' Ready ' ,//Status files: [],//image array point: {}, Uploading:false,//progress bar percent:0,//Upload Progress}}      , methods: {//Add Picture Action ' Add () {this. $refs. File.Click ();          },//Upload image Operation Submit () {if (this.files.length = = = 0) {console.warn (' no file! '); return}//Create FormData object Const FORMDATA = new FormData (); This.files.forEach (item) = {Formdata.append (item.name, Item.file)}) const XHR = new XMLHTTPR Equest () Xhr.upload.addEventListener (' Progress ', this.uploadprogress, False) Xhr.open (' POST ', THIS.SRC, True          ) This.uploading = True Xhr.send (formData) xhr.onload = () = {this.uploading = False if (xhr.status = = = | | xhr.status = = 304) {this.status = ' finished ' Console.log (' upload          Success! ') } else {console.log (' Error:error Code ${xhr.status} ')}}},//Complete operation Restore State Finis Hed () {this.files = [] This.status = ' ready '},//upload an image in the Picture List Remove (index) {this. Files.splice (index, 1)},//wake-up Camera/Gallery filechanged () {Const LIST = this. $refs. File.files for ( Let i = 0; i < list.length;       i++) {if (!this.iscontain (List[i])) {Const ITEM = {       Name:list[i].name, Size:list[i].size, File:list[i]}//Convert picture format This.html5reader (List[i], item) This.files.push (item)}} this. $refs. File.valu e = '},//Convert picture file to BASE64 format html5reader (file, item) {Const READER = new FileReader () reader.      onload = (e) + = {this. $set (item, ' src ', E.target.result)} reader.readasdataurl (file)}, Determines whether to include Iscontain (file) {This.files.forEach (item) + = {if (Item.name = = = File.name &&am P Item.size = = = File.size) {return true}}) return false},//Upload Progress Uploa Dprogress (EVT) {Const COMPONENT = this if (evt.lengthcomputable) {Const PERCENTCOMPLETE = math.ro und ((evt.loaded *)/evt.total) component.percent = percentcomplete/100} else {Console.wa RN (' Upload progress UNable to compute ')}}}}</script><style lang= "less" scoped>. Vue-uploader {border:1px    Solid #e5e5e5;      . file-list {padding:10px 0px;        &:after {content: ';        Display:block;        Clear:both;        Visibility:hidden;        line-height:0;        height:0;      font-size:0;        }. file-item {float:left;        position:relative;        width:100px;        Text-align:center;          img{width:80px;          height:80px;        border:1px solid #ececec;          }. file-remove {position:absolute;          right:12px;          Display:none;          top:4px;          width:14px;          height:14px;          Color:white;          Cursor:pointer;          line-height:12px;          border-radius:100%;          Transform:rotate (45DEG);        Background:rgba (0, 0, 0, 0.5);      } &:hover{. file-remove {display:inline;    }}. file-name {margin:0;          height:40px;          Word-break:break-all;          font-size:14px;          Overflow:hidden;          Text-overflow:ellipsis;          Display:-webkit-box;          -webkit-line-clamp:2;        -webkit-box-orient:vertical;      }}}. add {width:80px;      height:80px;      margin-left:10px;      Float:left;      Text-align:center;      line-height:80px;      border:1px dashed #ececec;      font-size:30px;    Cursor:pointer;      }. upload-func {Display:flex;      padding:10px;      margin:0px;      Background: #f8f8f8;      border-top:1px solid #ececec;        . progress-bar {flex-grow:1;          section {margin-top:5px;          Background: #00b4aa;          border-radius:3px;          Text-align:center;          Color: #fff;          font-size:12px;        Transition:all. 5s ease;        }}. operation-box {flex-grow:0;padding-left:10px;          button {padding:4px 12px;          Color: #fff;          Background: #007ACC;          Border:none;          border-radius:2px;        Cursor:pointer;    }}} & > Input[type= "file"] {display:none; }}</style>

2. Page Call

Uploadimg.vue

<!--upload pictures--><template> <div> <!--title bar--<mt-header title= "upload pictures" > <router-l Ink to= "/" slot= "left" > <mt-button icon= "Back" > Return </mt-button> </router-link> </mt-h Eader> <!--Content--<div style= "width:100%;"  > <m-up-loader:src= "src" ></m-up-loader> </div> </div></template><script> Upload picture component import Muploader from '. /components/uploader ' export default {name: ' uploadimg ', components: {Muploader}, data () {Retu RN {src: '/api/imgs ',//Background Accept picture Path}}, mounted () {//}, Methods: {//}}&LT;/SC    Ript><style lang= "Less" scoped>. Show {width:100px;    height:100px;    Overflow:hidden;    position:relative;    border-radius:50%;  border:1px solid #d5d5d5;    }. picture {width:100%;    height:100%;    Overflow:hidden;  Background-position:center Center;  Background-repeat:no-repeat;  Background-size:cover; }</style>

3.

.

vue2.0 custom picture Upload (UpLoader) component