Vue+elementui implementation file Download and upload

The ability to download sample files is generally available when bulk import is required. Implement the download function directly using the <a> tag.

<class:hrefdownload= ""  title  = "Download"> download </a>

Downloadhttp is the path to the file download, the Download property is designed to prevent the browser from directly opening without downloading. The path is a very important part of the download file, generally in order to facilitate maintenance will put the file on the server, the path needs to be judged in the Apiconfig.js file is the test or server side, the main idea is to set the two ends of different baseurl, no longer repeat. Downloadhttp = baseUrl + path same part. On the Linux server it is best to set the file name to English, the Chinese can be decoded when the error, resulting in file search failure.

The upload of the file mainly uses the el-upload in element.

<El-uploadclass= "Upload-demo"Action= "https://jsonplaceholder.typicode.com/posts/": On-preview= "Handlepreview": On-remove= "Handleremove": Before-remove= "Beforeremove"Multiple:limit= "3": On-exceed= "Handleexceed": File-list= "FileList">  <El-buttonsize= "small"type= "PRIMARY">Click Upload</El-button>  <DivSlots= "Tip"class= "El-upload__tip">Only jpg/png files can be uploaded, and no more than 500kb</Div></El-upload><Script>Exportdefault{data () {return{fileList: [{name:'Food.jpeg', URL:'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/ format/webp/quality/100'}, {name:'Food2.jpeg', URL:'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/ format/webp/quality/100'}]      };      }, Methods: {handleremove (file, fileList) {console.log (file, fileList);      }, Handlepreview (file) {console.log (file); }, Handleexceed (Files, fileList) { This. $message. Warning (' Current restricted selection3files, this time selected ${files.length} files and a total of ${files.length+filelist.length} files '); }, Beforeremove (file, fileList) {return  This. $confirm (' OK to remove ${file.name}?      `); }    }  }</Script>

Where action is a required parameter that is used to write the interface address of the transfer. Use more is on-success, this hook is the callback when the upload succeeds, when the transfer is complete, it can be called. The function is called whenever a successful upload occurs, regardless of the value returned by the background interface. However, in the actual application, due to the incorrect format of Excel, it will cause the background parsing to fail, return success = 0. We need to use this method for subsequent operations.

<El-uploadclass= "Upload-demo"Action="": On-success= ' handlesuccess 'Multiple:limit= "3": On-exceed= "Handleexceed": File-list= "FileList">  <El-buttonsize= "small"type= "PRIMARY">Click Upload</El-button></El-upload>

<Script>Exportdefault{data () {return{fileList: []//all submitted document information is stored in this array      }; }, Methods: {handleexceed (Files, fileList) { This. $message. Warning (' Current restricted selection3files, this time selected ${files.length} files and a total of ${files.length+filelist.length} files '); }, Handlesuccess (response, file, fileList) {//response is the entire content returned in the background     if(response.success=== 1) {Console.log ('Parse Success')     }Else{Console.log ('Parse failed')       }     }    }  }</Script>

Second, the Clearfiles method, which uses a higher frequency, is used to clear all document information that has been selected. When uploading in dialog, when the current dialog is closed, the last data needs to be emptied when it is opened again, if it is a table Form type, you can simply empty its bound array object, if the file type, you need to Clearfiles method to clear

Vue+elementui implementation file Download and upload