This is the fifth day of my participation in the August More text Challenge. For details, see:August is more challenging
I am an amateur front-end development, because the company (very pit) think I am very cow force, so let me before and after the end together to play, helpless I can only stumble on the study of VUE.
When developing projects, it is common to use the file upload function, including single file upload and multi-file upload, upload various types of files. In VUE to achieve multiple file upload function, or very convenient.
In this article, let’s learn how to package the multi-file upload function into a component that can be used in two or three lines of code.
1. Front-end code
First let’s look at the front end, how to encapsulate it as a component. When we call it, we may need to pass some parameters to it from the outside, so we need to define some parameters to pass. These are the parameters that we can put in props
export default {
props: {
/ / value
value: [String.Object.Array].// Size limit (MB)
fileSize: {
type: Number.default: 2,},// File type, for example [' PNG ', 'JPG ',' JPEG ']
fileType: {
type: Array.default: () = > [".jpg".".jpeg".".png".".doc".".xls".".xlsx".".ppt".".txt".".pdf"],},// Whether to display the prompt
isShowTip: {
type: Boolean.default: true
},
Id / / documents
billId: {
type: Number.require: true
},
// Document type
billType: {
type: Number.required: true}}}Copy the codeThe above defines some file sizes, file types, etc., which are default values if not passed in. The document type and document ID must be passed in, which can be defined according to the actual development needs.
For the file upload component, we can use the Element’s El-Upload. When the page is introduced, we usually wake up a file upload popup after clicking on it, which can be surrounded by the el-Dialog tag. The complete code is as follows
<template>
<el-dialog title="Attachment upload" :visible.sync="visible" width="800px" :close-on-click-modal="false" @close="cancel">
<div class="upload-file">
<el-upload
:action="action"
:before-upload="handleBeforeUpload"
:file-list="fileList"
:limit="3"
multiple
:accept="accept"
:on-error="handleUploadError"
:on-exceed="handleExceed"
:on-success="handleUploadSuccess"
:on-change="handChange"
:http-request="httpRequest"
:show-file-list="true"
:auto-upload="false"
class="upload-file-uploader"
ref="upload"
>
<! -- Upload button -->
<el-button slot="trigger" size="mini" type="primary">Select the file</el-button>
<el-button style="margin-left: 10px;" :disabled="fileList.length < 1" size="small" type="success" @click="submitUpload">Uploading to the server</el-button>
<! -- Upload hints -->
<div class="el-upload__tip" slot="tip" v-if="showTip">Please upload<template v-if="fileSize">Not larger than<b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
<template v-if="fileType">Format for<b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>The file</div>
</el-upload>
<! -- File list -->
<transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
<li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in list">
<el-link :href="file.url" :underline="false" target="_blank">
<span class="el-icon-document"> {{ getFileName(file.name) }} </span>
</el-link>
<div class="ele-upload-list__item-content-action">
<el-link :underline="false" @click="handleDelete(index)" type="danger">delete</el-link>
</div>
</li>
</transition-group>
</div>
</el-dialog>
</template>
Copy the codeWe need to define some of the variables we used above in data
data() {
return {
// Selected file list
fileList: [].// Whether to display the file upload popover
visible: false.// The types of files that can be uploaded
accept: ' '.action: 'action'
};
},
Copy the codeThe Accept field needs to be obtained after the page is created by concatenating the incoming or default fileType field
created() {
this.fileList = this.list
/ / stitching
this.fileType.forEach(el= > {
this.accept += el
this.accept += ', '
})
this.fileType.slice(0.this.fileList.length - 2)},Copy the codeThe following is the method of file upload. Here we use the method of manually uploading the selected file. Please see the code below
<el-upload
:action="action" // Manually upload. This parameter is useless, but since it is mandatory, you can fill in any value
:before-upload="handleBeforeUpload" // The operation performed before the file is uploaded
:file-list="fileList" // Selected file list
:limit="3" // Upload a maximum of several files at a time
multiple // Multiple options are available
:accept="accept" // Types of files that can be uploaded
:on-error="handleUploadError" // on the error call
:on-exceed="handleExceed" // Called when the number of files exceeds the limit
:on-success="handleUploadSuccess" // Called when the upload was successful
:on-change="handChange" // called when the file has changed
:http-request="httpRequest" // The custom file upload method will be called when we manually click the upload button
:show-file-list="true" // Whether to display the file list
:auto-upload="false" // Turn off automatic upload
class="upload-file-uploader"
ref="upload"> <! -- Upload button --><el-button slot="trigger" size="mini" type="primary">Select the file</el-button>
<el-button style="margin-left: 10px;" :disabled="fileList.length < 1" size="small" type="success" @click="submitUpload">Uploading to the server</el-button>
Copy the codeClicking Upload to the server triggers the submitUpload to call our custom method.
Note that the select file button needs to have a slot=”trigger” property, otherwise clicking the Upload to server button will also trigger the select file box.
Now let’s look at the related methods
methods: {
// Call this method externally to display the file upload popover
show() {
this.visible = true
},
// Check the format and size before uploading
handleBeforeUpload(file) {
// Check the file type
if (this.fileType) {
let fileExtension = "";
if (file.name.lastIndexOf(".") > -1) {
fileExtension = file.name.slice(file.name.lastIndexOf("."));
}
const isTypeOk = this.fileType.some((type) = > {
if (file.type.indexOf(type) > -1) return true;
if (fileExtension && fileExtension.indexOf(type) > -1) return true;
return false;
});
if(! isTypeOk) {this.$message.error(The file format is incorrect. Please upload itThe ${this.fileType.join("/")}Format files! `);
return false; }}// Check the file size
if (this.fileSize) {
const isLt = file.size / 1024 / 1024 < this.fileSize;
if(! isLt) {this.$message.error(The size of the uploaded file cannot exceedThe ${this.fileSize}MB! `);
return false; }}return true;
},
// The number of files exceeded
handleExceed() {
this.$message.error(Only 3 files can be uploaded);
},
// Failed to upload
handleUploadError(err) {
this.$message.error("Upload failed, please try again");
},
// Upload successful callback
handleUploadSuccess(res, file) {
this.$message.success("Upload successful");
this.cancel()
},
/** Call */ when the file state changes
handChange(file, fileList) {
this.fileList = fileList
},
// Delete the file
handleDelete(index) {
this.fileList.splice(index, 1);
},
// Get the name of the file
getFileName(name) {
if (name.lastIndexOf("/") > -1) {
return name.slice(name.lastIndexOf("/") + 1).toLowerCase();
} else {
return ""; }},/** Manually submit upload */
submitUpload() {
if (this.fileList.length <= 0) {
return false
}
this.$refs.upload.submit()
},
/** Close the upload popup */
cancel() {
this.fileList = []
this.visible = false
},
/** Call interface upload */
httpRequest(param) {
const formData = new FormData()
formData.append("billId".this.billId)
formData.append("formType".this.billType)
formData.append('file', param.file)
uploadFormFile(formData).then(res= > {
if(res.code === 200) {// When uploading a custom file, you need to execute the callback function successfully
param.onSuccess()
this.$refs.upload.clearFiles()
this.msgSuccess("Upload successful")
// Callback method. After the file is successfully uploaded, the method specified by 'input' will be called, defined in the caller
this.$emit("input", res.data)
}
}).catch((err) = >{})}}Copy the codeAll the other methods are fine, but let’s look at this httpRequest method. If you call it directly using the URL, you’ll have cross-domain problems. You’ll need to put the token in the header of the request. Here, I call through the encapsulated API interface, and have done the global token authentication, so I only need to take the relevant parameters.
Use formData with the required parameters. $emit(“input”, res.data) emit emit(“input”, res.data).
This encapsulates a file upload component, so let’s see how to use it.
2. Use components
On the page you use, you first need to introduce components
import FileUpload from '@/components/FileUpload'
Copy the codeThen call it from within the page
<file-upload ref="fileUploadDialog" :billId="this.form.noticeId" :billType="10" @input="getAttachList"></file-upload>
Copy the codeBillId and billType are the parameters we pass in dynamically, the rest of the parameters are default values, and the getAttachList method is executed after the file has been uploaded successfully.
We need a button to wake up the file upload box
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
:disabled="notEdit"< > upload/el - button >Copy the codeDefine the hangAdd method and directly call the show method defined in the component
handleAdd() {
this.$refs.fileUploadDialog.show()
},
Copy the codeThen define the method to obtain the list of uploaded files.
getAttachList() {
this.loading = true
this.attachQuery.billId = this.form.noticeId
this.attachQuery.billType = 10
listAttachment(this.attachQuery).then(response= > {
this.attachList = response.rows
this.attachList.forEach(el= > {
// Convert to KB and take 2 decimal places
el.fileSize = parseFloat(el.fileSize / 1024).toFixed(2)})this.attachTotal = response.total
this.loading = false
}).catch(() = >{})},Copy the codeAt this point, the front-end code is complete.
3. Back-end code
Here I choose to upload the picture to Ali Cloud server, where is not important
/** * Document attachment upload *@paramBillId Document ID *@paramFormType Document type *@paramFile Uploaded file *@return
* @throws Exception
*/
@PostMapping("/form/attachment/upload")
public AjaxResult uploadFormFile(@RequestParam(value = "billId") Long billId,
@RequestParam(value = "formType") Integer formType,
@RequestParam("file") MultipartFile[] file) throws Exception {
try {
// The path after the file is uploaded
List<String> pathList = new ArrayList<>();
for (MultipartFile f : file) {
if(! f.isEmpty()) {// Call the interface to upload photos
AjaxResult result = uploadService.uploadFormFile(f, billId, formType);
if(! result.get("code").toString().equals("200")) {
return AjaxResult.error("Uploading file failed, please contact administrator");
}
pathList.add(result.get("data").toString()); }}// Return the image path
return AjaxResult.success(pathList);
} catch (Exception e) {
returnAjaxResult.error(e.getMessage()); }}Copy the codeHere we take the file with an array of MultipartFile, and then we call a method that determines some properties of the file and then we upload the file, and we don’t want to post the method of uploading the file.
At this point, this article is ok. A list of MIME types can be viewed here. If you encounter any problems in the process, you can leave a comment below, I will reply.