Business logic needs to add records first and then generate corresponding unique file names by adding the IDS returned by the sql operations of records. el-upload does not automatically upload some pits described below
<el-upload :action="uploadUrl()" :on-remove="handleRemove" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess" :on-error="uploadFalse" :http-request="httpRequest" :on-change="fileChange" multiple :limit="1" :auto-upload="false" :on-exceed="handleExceed" :file-list="fileList"> <el-button size="small" type="primary">Click Upload</el-button> <div slot="tip">Only upload jpg/png File, no more than 500 kb</div> </el-upload>
Because the el-upload control with a picture preview must upload the URL back successfully to generate the preview, this synchronous upload can't use the el-upload with a preview.
Turn off auto-upload first: auto-upload="false" then set
: http-request="httpRequest" to specify the method triggered when el-upload is uploaded
Actions write directly to the controller path in the background or not
limit limits the number of files uploaded as the name implies
: on-remove or something like that is the way to respond to an operation. I don't understand how to read the el-upload in the element's official manual
file-list is the array in which the specified file is stored
My idea is that once the form has been validated, I can call the httpRequest method to upload the form with the file so that it can be uploaded simultaneously
SubmitForm : function (formName){ this.$refs[formName].validate((valid) => { if (valid) { if(this.file=null){ this.$message.error('Must upload pictures'); }else{ this.httpRequest(); } } else { this.$message.error('Error in information filled in'); return false; } }); },
Because the fileChange method triggers the selection of files by the control to assign files and file list objects to variables in Vue, it is important to determine if the file is empty when the form validation passes because the deletion method requires deleting the file.
fileChange:function(file,fileList){ this.file=file; this.fileList = fileList; },
Because I only upload a single file, delete a file if the file list adds the corresponding code
handleRemove: function(file){ this.file=null; },
Functions to limit the number of files
handleExceed:function(files, fileList){ this.$message.warning(`Current limit on selecting one file`); }
The most important httpRequest() method for uploading files along with a form has several important ajax settings
httpRequest:function(param){ let url = "" let fd = new FormData()// FormData Object fd.append('file', this.file.raw)// This is critical because el-upload encapsulates a layer of file objects so the file must be.raw //Otherwise, if the file is not received in the spring boot controller, a string called "object" will be received fd.append('something', this.ruleForm.something)// Form data uploaded with file //Co must be setNtentType:falseOtherwise springboot will report the request was rejected because no multipart boundary was found //The server will not find a parameter to split the contents of the form //Setting processData to false lets jquery not process the form or jquery will convert the changes to strings //cache: false, plus or minus should not matter because post does not go cached //async: false should and should not be important synchronous asynchronous should work $.ajax({ url:url, type:"post", processData:false, async: false, cache: false, contentType:false, data:fd, success: res => { console.log(res); if (res.code == 200) { this.$message({ message: res.msg, type: 'success' }); } else { this.$message.error(res.msg); } } }); },
Then simply add parameters to the spring boot controller method
@RequestParam("file") MultipartFile filename,HttpServletRequest request
You can receive the form file and the rest of the form parameters are request ed and then you can do that
The address of the podcast Mausetton Open that saw this man is also attached https://www.cnblogs.com/shihaiming/p/10410562.html