Input type= "file" needs to be checked on the interface before the file is uploaded, and the file box can be opened only when the check is passed, otherwise a prompt is given.

for example, before uploading a file, the name of the inspection form on the interface must be filled in. If it is empty, give a prompt. The pop-up box for the selected file will open only if you click Select File after filling in the value.

<div slot="footer" class="dialog-footer">
   <el-button class="file-cancel-btn" @click="showImportContent = false" size="mini" style=""> </el-button>
     <a href="javascript：;" class="a-upload" @click="checkBeforeImport">
        <input id="upload" type="file" @change="importfxx(this)"  accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
     </a>
</div>

at present, the prompt to prohibit non-empty has popped up, but the pop-up window of the file has also popped up and has not been stopped.

File vue.js

Dec.22,2021

Let the Select File disable, meet the criteria before the event can be triggered.

preventDefault

put a mask layer on it, remove it if the condition is met, and let it cover if you are not satisfied. Or the click that captures the parent element blocks the default event.

Previous: How to realize form single selection and multiple selection deletion by Angular6

Next: Do everyone's Wechat general account membership information and Mini Program member information come from a common table or separately?

How to upload a picture to the backend using the vue+Element framework, that is, store the path of the image to the database through an api, and upload the file to the server at the same time.
currently, I want to upload thumbnails of pictures in batches at the front end. I want to save the image path to the database by calling an api, and upload the files to the server. How to do this? this part has not been touched. ...

Filereader fileupload file vue.js

Jan.25,2022