element-ui+vue2实现粘贴上传
< style scoped lang= "scss" > . img- upload{ position : relative; display : inline- block; margin- right: 9px; } . image { width : 100px; height : 100px; margin- right: 9px; } . image: last- child{ margin- right: 0 ; } . img- upload . el- upload-- picture- card, . img- upload . el- upload- list__item{ height : 100px; width : 100px; line- height: 100px; } . img- upload . el- icon- close- tip{ display : none ! important; } . img- upload . el- upload- list__item- status- label{ display : none ! important; } . hide . el- upload-- picture- card { display : none; } . img- upload- title- required: before { content : '*' ; color : #F56C6C ; margin- right: 4px; } . el- upload__tip{ color : red; } . hide. el- upload- list . el- upload- list__item. is- focus { border : 2px solid red; }
< / style> < script async defer> var uploadMultiImage = { template : ` <div class="img-upload"><div v-if="!detail"><el-uploadref="upload":class="{hide:hideUpload}":action="action"list-type="picture-card":limit="limit":file-list="fileList":multiple="multiple":on-success="uploadSuccess":on-exceed="uploadExceed":on-change="uploadChange":on-remove="uploadRemove":on-preview="handlePictureCardPreview"@paste.native="handlePaste"><i class="el-icon-plus"></i></el-upload><div :class="required?'img-upload-title img-upload-title-required':'img-upload-title'">{{title}}</div><div v-if="tip" slot="tip" class="el-upload__tip">{{tip}}</div></div><div v-else><div v-if="imageList" ><el-image v-for="(item,index) in fileList" :key=item.url :src="item.url+'?w=80&h=80'" class="image" :preview-src-list="[item.url]" @click.stop="handleClickItem"></el-image></div></div><el-dialog :visible.sync="dialogVisible"><img width="100%" :src="dialogImageUrl" alt=""></el-dialog></div> ` , props : { urls : { type : [ String, Array] , default ( ) { return [ ] } } , action : { type : String, default : '/v1/api/index/upload' } , detail : { type : Boolean, default : false } , multiple : { type : Boolean, default : false } , title : { type : String, default : '' } , limit : { type : Number, default : 1 } , required : { type : Boolean, default : false } , tip : { type : String, default : '' } , } , model : { prop : 'urls' , event : 'valChange' } , created ( ) { } , watch : { urls ( val ) { this . imageList = val} , } , data ( ) { return { fileList : this . pathUrls ( this . urls) , imageList : this . urls, hideUpload : this . isHideUpload ( this . urls) , dialogImageUrl : '' , dialogVisible : false } } , mounted ( ) { } , computed : { } , methods : { handlePaste ( e ) { var clipboardData = e. clipboardData; if ( ! clipboardData) { clipboardData = e. originalEvent. clipboardData; } var items= '' ; items = ( e. clipboardData || window. clipboardData) . items; let file = null ; if ( ! items || items. length === 0 ) { this . $message. error ( '当前浏览器不支持粘贴本地图片,请打开图片复制后再粘贴!' ) ; return ; } for ( let i = 0 ; i < items. length; i++ ) { if ( items[ i] . type. indexOf ( 'image' ) !== - 1 ) { file = items[ i] . getAsFile ( ) ; break ; } } if ( file) { let formData = new FormData ( ) ; formData. append ( 'file' , file, 'pasted_image.png' ) ; console. log ( formData) ; this . uploadPastedImage ( formData) ; } } , uploadPastedImage ( formData ) { fetch ( this . action, { method : 'POST' , body : formData} ) . then ( response => response. json ( ) ) . then ( data => { if ( data. code) { console. log ( data) ; const newFile = { name : 'pasted_image.png' , url : data. domain + '/' + data. data[ 0 ] , uid : Date. now ( ) , status : 'success' } ; this . fileList. push ( newFile) ; this . valChange ( ) ; } else { this . $message. error ( '上传失败,请稍后重试' ) ; } } ) . catch ( error => { this . $message. error ( '网络错误,请稍后重试' ) ; console. error ( 'Error:' , error) ; } ) ; } , pathUrls ( urls ) { let fileList = [ ] if ( urls. length> 0 ) { urls. forEach ( function ( v ) { if ( ! v. includes ( 'http' ) ) { fileList. push ( { 'name' : v, 'url' : 'http://image.spocoo.com/' + v, } ) } else { fileList. push ( { 'name' : v, 'url' : v, } ) } } ) ; } return fileList} , nameUrls ( fileList ) { let urls = [ ] fileList. forEach ( function ( v ) { if ( v. response) { urls. push ( v. response. data[ 0 ] ) } else { urls. push ( v. url) } } ) ; return urls} , isHideUpload ( urls ) { return urls. length >= this . limit; } , uploadSuccess ( res, file, fileList ) { if ( res. code) { this . fileList = fileListthis . valChange ( ) } else { layer. msg ( '网络走丢了,请稍后重试上传哦' ) } } , uploadExceed ( ) { layer. msg ( this . title+ '最多可以上传' + this . limit+ '张图片' ) } , uploadChange ( file, fileList ) { this . hideUpload = fileList. length >= this . limit; } , uploadRemove ( file, fileList ) { this . fileList. splice ( this . fileList. findIndex ( e => e. url === file. url) , 1 ) this . hideUpload = fileList. length >= this . limit; this . valChange ( ) } , handlePictureCardPreview ( file ) { this . dialogImageUrl = file. url; this . dialogVisible = true ; } , valChange ( ) { this . $emit ( 'valChange' , this . nameUrls ( this . fileList) ) } , handleClickItem ( ) { this . $nextTick ( ( ) => { let domImageMask = document. querySelector ( ".el-image-viewer__mask" ) ; if ( ! domImageMask) { return ; } domImageMask. addEventListener ( "click" , ( ) => { document. querySelector ( ".el-image-viewer__close" ) . click ( ) ; } ) ; } ) } } }
< / script>