\

Element-ui Custom file upload

Upload Some parameter descriptions for the component

parameter instructions type An optional value The default value
action This parameter is mandatory string – –
headers Set the upload request header object – –
on-change Hook when the file state changes, is called when a file is added, upload succeeds, and upload fails function(file, fileList) – –
before-upload The hook before uploading the file, which stops uploading if false or a Promise is returned and reject is rejected. function(file) – –
before-remove The hook before deleting a file, which takes the uploaded file and the list of files, and stops deleting if false or a Promise is returned and reject is rejected. function(file, fileList) – –
http-request Overrides the default upload behavior and allows you to customize the upload implementation function(data) – –
limit Maximum number of uploads allowed number – –
on-exceed A callback when the number of files exceeds the limit function(files, fileList) – –
accept Limit the type of files to be uploaded. For example, accept=”.xlsx,.xls” Data of text type

Custom file upload

Using element-UI to customize file upload procedures: 1. Enable automatic upload disable :auto-upload=”false “. 2. Use http-Request to override the default upload behavior. 3. The uploaded file object is obtained from the callback specified in the HTTP-Request. Add the file object to FromData. 5. Send the file object to the backend

  • FormData object

    FormData object: an object of type map that stores key-value pairs. FormData object, which can form the name and value of all form elements into a queryString and submit it to the background.

    Note: File uploads are all about storing file objects in FromData and sending them to the back end

    • The FormData object stores a key-value pair, the key is of type string, and the value may beblob(file object) or a string
    • Create a FromData object and passappend()The method adds data to the object, and the method receives oneKey/value pairKey:StringType value, value: can be oneblob(file stream) or a string
    • Note :FormData is a special object that passes directlyconsole.logWhen you print it, you can’t print it

  • Send the FromDate object to the server

    • Add headers: {” content-type “: “multipart/form-data”} to the request body and set the transfer Type to FromData

  • Code implementation

    <template> <el-upload class="upload-demo" ref="upload" action="" :http-request="myUploadFile" :on-remove="handleRemove" :on-change="handlChange" :on-exceed="handlExceed" :file-list="fileList" :limit="1" accept=".xlsx,.xls" :auto-upload="false"> <el-button slot="trigger" size="small" type="success"> Select file </el-button> <div slot="tip" Class ="el-upload__tip"> Only XLS/XLSX files </div> </el-upload> </template> <script> import {importorder} from can be uploaded "@/api/infra/order"; Export default {name: 'TemplateImport', data() {return {// commit Loading submitLoading: false, fileList: []}; }, methods: {/** ** handleRemove(file, fileList) {this.fileList = fileList; }, /** * callback to select file */ handlChange(file, fileList) {this.fileList = fileList; @param data */ myUploadFile(data) {let file = data.file; let formData = new FormData(); formData.append("file", file); Const loading = this.$loading({lock: true, text: 'order loading ',}); importorder(formData).then(res => { loading.close(); this.submitLoading = false; This.$confirm('', 'import successful ', {confirmButtonText:' confirm ', type: 'success', showCancelButton: false, closeOnClickModal: false, center: true }) }).catch(() => { loading.close(); this.submitLoading = false; })}, /** * Import button trigger */ submitUpload() {this.submitLoading = true if (this.filelist.length <= 0) { $message.error(" Please upload file first ") this.submitLoading = false; return; $refs.upload.submit(); // If :http-request="" specifies a callback function, then the default upload will be overridden and will flow into the http-Request callback}, / / handlExceed() {this.$message.error(" Select only one file to upload ")},}}; </script>Copy the code