How to upload Files with vue
This article mainly explains "how to upload files in vue". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "how to upload files with vue"!
1. Use the el-upload plug-in of elementUI to upload.
Html:
Js:
Data () {return {AddSubmenuData: {id: ", pid:", funType:1, name: ", sort:", SystemCoding: ", remarks:", imageUrl:''},} }, methods: {/ / get picture information and convert it to base64 handleChange (file, fileList) {let reader = new FileReader (); let fileResult = ""; reader.readAsDataURL (file.raw); reader.onload = function () {fileResult = reader.result;}; reader.onloadend = function () {this.AddSubmenuData.imageUrl = fileResult} }}
Css:
/ deep/. Avatar-uploader. El-upload {border: 1px dashed # d9d9d9; border-radius: 6px; cursor: pointer; position: relative; overflow: hidden; margin-left: 80px; margin-bottom: 22px;} .avatar-uploader. El-upload:hover {border-color: # 409EFF;} .avatar-uploader-icon {font-size: 28px; color: # 8c939d Width: 178px; height: 178px; line-height: 178px; text-align: center;} .avatar {width: 178px; height: 178px; display: block;}
Effect picture:
2. Use input for upload.
1), html
First of all, the type attribute of input should be changed to file, if you need to click the button to upload the file. You can add a ref= "fileInput" to input, and then invoke the input event by clicking the button: @ click= "$refs.fileInput.click ()".
Add
2), js
After getting the file, you can process the data and call the interface. Because sometimes the uploaded file is duplicated, calling the method again is invalid, so you can clear the previously uploaded file after each upload, so that the method can be called repeatedly even if the file is the same. This.$refs.fileInput.value=''
/ / get file data getFile (event) {/ / this is the file you uploaded event.target.files [0] let formFile = new FormData (); formFile.append ("file", event.target.files [0]); formFile.append ("apply_info_id", this.RndNum (12)); formFile.append ("file_type",'') / / call interface file_upload (formFile) .then (res = > {this.addInformation.addPoupTableData.data.push ({name:res.data.name,id:res.data.id,size: (event.target.files [0] .size / 1024) .tofixed (0) + "kb", path:res.data.path}) / / clear the file this.$refs.fileInput.value=''} after calling the interface)} To this point I believe you have a deeper understanding of "how to upload files in vue". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
