if a few words are added to the official default upload component, how can the upload function be realized when the word is clicked?
if a few words are added to the official default upload component, how can the upload function be realized when the word is clicked?
wouldn't it be nice to implement it through css? Cover the clickable area of the element upload component to click upload. To click "Click upload" is to click on the upload component
provides a little idea that el-upload plus a class, triggers the click event manually.
document.querySelector('.class button').click();there is a manual upload in element
<el-upload
class="upload-demo"
ref="upload"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary"></el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload"></el-button>
<div slot="tip" class="el-upload__tip">jpg/png500kb</div>
</el-upload>
<script>
export default {
data() {
return {
fileList: [{name: 'food.jpeg', url: 'https://img.codeshelper.com/upload/img/2021/04/02/vnch0wj1bts14879.jpg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://img.codeshelper.com/upload/img/2021/04/02/vnch0wj1bts14879.jpg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
};
},
methods: {
submitUpload() {
this.$refs.upload.submit();
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
}
}
}
</script>Previous: Wechat has no permission to develop jssdk card voucher interface.
Next: How did the data ['id'] in reactor in saltstack come from?
I encountered a problem when using Element UI. I wanted to customize a component according to el-table, but I found it impossible to render the content of el-tabel-col dynamically. this is the official usage. Use slot to customize the content <temp...
...
the upload component of element has an upload progress bar, but I find that the progress is inconsistent with the progress of my upload request, that is, 100% of the time, it will not show the success of the upload (green tick). How can I achieve the pro...
this is put separately in a js file, and then the error message cannot be found in the component. How can the data in it be sent to the data corresponding to option after it is obtained from the backend server? all the data is dynamic export const opti...
how to parse the tags in the data. ...
because the pop-up boxes select , dialog of elementUI are superimposed z-index , the display of banner is somewhat flawed . for example, when the drop-down box scrolls over banner : bannerz-index: think of a way to hide the drop-down box ...
I will get an array, such as: [1], then 1 corresponds to apple, 2 corresponds to watermelon, and 3 corresponds to durian. what I can think of for the time being is: let arr = this.checkboxGroup1 for(let k in arr){ if(arr[k]...
now you want to get the values of all the check boxes. The document in element has not found the corresponding method to get it. I don t want to get this value through dom. I hope God will give me some advice. Orz ...
as shown in the picture: I want to hide the first two delete buttons, but the last one is not hidden. How to write the page structure as follows? <el-table-column label="" width="200%"> <template scope="s...
data.append( file , _this.file); data.append( token , _this.postData.token); data.append( key , _this.postData.key); axios.post(_this.url, data).then(function(res) { console.log(res); }) key and hash have b...
I want to render the table, of element based on the data given by the backend, but the data needs to be processed to achieve the desired effect. < H2 > data are as follows: < H2 > testList: [ { attr: [{ name: xu1 , id: 2 ...
tab this el.parentNode.removeChild (el) just deletes the contents of the tab, but the head of the tab is not hidden. can you give me an idea or an improved way to achieve this requirement? Thank you very much ...
1920*1080 then release the project, open it on the TV, the resolution of 4K is 3840 2160, but the display of Kanban is always incomplete, the td under el-table is propped up by text, but the display on the computer is very normal, what is the proble...
the right table format configuration column is the array according to the index record selected on the left. The blue row configuration number on the right side is equal to the white row configuration number. But after entering {{}, the view is upda...
I navigate on the left and leave a blank after folding. How can I give a div style to the right? ...
Hello, everyone. I have a problem with elementui. The select of elementui is selected here. I will get an array from the back end, and then I assign this array to the corresponding array of multiple selections at the front end, so that the data of multi...
< el-form class= "from-n " ref= "form ": model= "form " label-width= "80px " style= "width:940px; margin:auto; float:left; " > <!-- <input type="hidden" name="id" value="{$info.id}"> --> &...
does any of my friends encounter this situation when using element? The attachment is uploaded in the form, and the wrong line is found after deleting the attachment. Tried to use doLayout method also has no effect, ask for advice! ...
problem description encountered a problem with multiple el-upload. Upload the file manually and submit it all at once. But the background is required to submit the form of binary, I would like to ask what method for conversion, conversion and which at...
problem description divul li ...