Please state the source of the article. Welcome to add Echo wechat (wechat id: T2421499075) for exchange and learning. Invincible, according to not claim to always win, defeat not decadent, according to the ability to forge ahead. That’s how powerful it really is!!

This article is mainly used for the upload implementation record, only the interpretation of the use of upload rules, familiar can be skipped. Realization technology Vue + iView

Use the following styles from upload in iView as the template

The implementation code

<Upload ref="upload" :max-size="2048" :format="['jpg','jpeg','png']" :on-remove="handleRemove" :on-success="handleSuccess" :on-exceeded-size="handleMaxSize" :on-format-error="handleFormatError" : before - upload = "handleBeforeUpload" action = "http://127.0.0.1:8080/springboot/upload/img" > < Button icon="ios-cloud-upload-outline" style="margin-top: 5px">Upload files</Button> </Upload> :on-format-error="handleFormatError" handleFormatError: function (file) {this.$modal. info({title: 'File format is incorrect ', content: The 'file' + file.name + 'format is not correct, please upload JPG, JPEG or PNG image. '}); }, # max-size="2048" (KB) :on-exceeded size="handleMaxSize" handleMaxSize: Function (file){this.$modal. info({title: 'exceeded file size limit ', Content:' file '+ file.name +' too large to exceed 2M. '})}, # before-upload="handleBeforeUpload" function () { const check = this.uploadList.length < 1; if (! Check) {this.$Modal. Info ({title: 'Modal ', content:' Only one file can be uploaded, delete the current file if retransmission is required '})} return check; HandleRemove: function(file){const fileList = this.$refs.upload.fileList; this.$refs.upload.fileList.splice(fileList.indexOf(file), 1); }, # handleSuccess ="handleSuccess" Mounted :function() {this.uploadList = this.upload.filelist; function(res){console.log(res)} # Data () {return {uploadList: []}}Copy the code

Be a blogger with boundaries