How to combine Vue with ElementUI to upload Base64-encoded images
Today, I would like to share with you how Vue combined with ElementUI upload Base64 encoded pictures of the relevant knowledge points, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can learn something after reading this article, let's take a look at it.
ElementUI uploads Base64-encoded images
I think ElementUI is still a very good component for writing mobile phone, so this time I used the Upload component of ElementUI to upload pictures, but the uploaded pictures of ElementUI component are easier to achieve in the form of File files, but this time I need to convert the pictures into base64 codes to upload pictures.
Install ElementUInpm I element-ui-S to be introduced on demand (of course, you can also introduce it all if necessary) import {Upload} from 'element-ui'import' element-ui/lib/theme-chalk/index.css'Vue.use (Upload); upload implementation
Import {Toast} from "mint-ui"; export default {data () {return {actionUrl:'', imageUrl:'', / / upload pictures};}, methods: {getBase64 (file) {/ / convert the picture to base64-encoded return new Promise (function (resolve,reject) {let reader=new FileReader (); let imgResult= "; reader.readAsDataURL (file) Reader.onload=function () {imgResult=reader.result;}; reader.onerror=function (error) {reject (error);}; reader.onloadend=function () {resolve (imgResult) }})}, getFile (file,fileList) {/ / upload avatar this.getBase64 (file.raw) .then (res= > {this.$http.post ('home/ImgUpload', {"img": res}) .then (result= > {if (result.body.status===200) {this.imageUrl=result.body.data) } else {Toast ('picture upload failed');}})}. Avatar-uploader. El-upload {border: 1px dashed # d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; width:101px; height:101px }. Avatar-uploader. El-upload:hover {border-color: # 409EFF;}. Avatar-uploader. El-upload. El-upload__input {display: none;} .avatar-uploader-icon {font-size: 28px; color: # 8c939d; width: 100px; height: 100px; line-height: 100px; text-align: center;} .avatar {width: 100px; height: 100px; display: block } ElementUI converts uploaded pictures to Base64
Use the component, and then on-change bind a method to get the file information. Set auto-upload to false.
Select image upload, and upload at most one image
Define the methods method. When uploading a file, the bound function will be triggered, and then the contents of the file will be bound to the parameters of the function, so that you can get the contents of the file with file.raw.
GetFile (file, fileList) {console.log (file.raw)}
Then customize a method to convert the content of the picture into base64 format, and imgResult is the content of base64 format. To change to a base64 string, you need to call the FileReader api in the h6 feature, but this api cannot be return, so it is encapsulated with promise.
GetBase64 (file) {return new Promise (function (resolve, reject) {let reader = new FileReader (); let imgResult = ""; reader.readAsDataURL (file); reader.onload = function () {imgResult = reader.result;}; reader.onerror = function (error) {reject (error);} Reader.onloadend = function () {resolve (imgResult);};);}
Finally, call
GetFile (file, fileList) {this.getBase64 (file.raw) .then (res = > {console.log (res)});}, that's all about the article "how to upload Base64-encoded images with Vue and ElementUI". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.
