Set header in ElementUI upload component el-upload
In the vue project, we usually use axios to send ajax requests, and set the basic address of the request in axios, and set headers in the request interceptor.
(config=>{
();
// Token is required to send a request =("token")
return config;
})When uploading components using el-upload, action is the required parameter and the uploaded address.
But at this time, when we fill in the address for action, we must not write the basic address but only write the upload, and we must write the complete address.
This is because when the el-upload upload component uploads the request, it will not use the axios we set, but will encapsulate its own request method inside the component. So we have to write the address intact.
Sometimes an error will be reported when uploading, such as ‘invalid token’, because we do not set the request header for this upload request. The el-upload component has a property headers that sets the uploaded request header
<el-upload action="http://127.0.0.1:8888/api/private/v1/upload" :headers="headerObj" :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleSuccess" list-type="picture" > <el-button size="small" type="primary">Click to upload</el-button> <div slot="tip" class="el-upload__tip"> Uploadable onlyjpg/pngdocument，And not more than500kb </div> </el-upload>
Define headerObj in data
headerObj: {
Authorization: ("token"),
},Summary of the usage of upload component in element-ui
element-ui official website
Use the upload component:
<el-upload class="upload-demo" ref="uploadFile" :on-change="beforeUpload" :action="uploadUrl" :headers="myHeader" :on-remove="handleRemove" :before-remove="beforeRemove" :limit="1" :auto-upload="false" :on-exceed="handleExceed" > <el-button size="small" type="primary">Select a file</el-button>
-
action: It is the path to request the backend interface (required) -
header: It is the request header configuration / brings token here -
on-change: Hook when file status changes, it will be called when adding files, uploading successfully, and uploading fails -
on-remove: It is executed when removing files from the file list -
before-remove: Execute before deleting a file, which can be used to prompt the user to confirm the deletion twice. -
limit: It is the number of uploaded files -
auto-upload: It controls whether it is uploaded automatically -
on-exceed: Execute when the number of uploaded files exceeds the limit
The ref added here is to clear the list after the user clicks to close.
This is also provided by element through the clearFiles method.
addDialogClose(){
this.$();
= false
this.$();
}The most tricky part when using it is that the action attribute cannot respond to data and new data in a timely manner, and it is always one step later.
Use before-upload and on-progress, the data has been changed, but the action is still old.
Research for the afternoon:
Set the auto-upload property to false,
Then on-change was used
In the on-change hook, determine the file suffix to determine the file type and determine the call to different interfaces
Then use the ref attribute to perform upload
beforeUpload(file) {
if(/\.(mp4|m3u8|rmvb|avi|swf|3gp)$/.test()) {
=
}else{
=
}
this.$nextTick(()=>{
this.$()
})
},It's OK now!
If the action is a dead path, you don't need to consider these issues. If it is dynamic, let it be asynchronous or add a delay to it.
Summary: The upload component has been packaged very well, but the action attribute is required, which is a bit of a pitfall. The above is personal experience. I hope you can give you a reference and I hope you can support me more.