図に示すように、従来の入力ボックスを使用してファイルをアップロードする方法を実現します。
ファイル形式を確認する方法、コードは次のとおりです。
-------------html部分-----------
<div v-if="!readOnly" class="upload-btn" @click="chooseTrigger('upload')">添加附件</div>
<input type="file" ref="uploadInput" style="display: none" @change="uploadTrigger" />
-------------js部分-------------
/* 校验部分 */
uploadTrigger() {
let files = this.$refs["uploadInput"].files;
// 限制的格式范围
const txtname = ".zip|.rar|.html|.doc|.docx|.ppt|.wps|.pdf|.xls|.xlsx|"
// 校验
var extName = files[0].name.substring(files[0].name.lastIndexOf(".")).toLowerCase();//（把路径中的所有字母全部转换为小写）
// 判断
if(txtname.indexOf(extName+"|") == -1) {
this.$Message.error('请上传正确的文件格式！如：' + txtname);
return
}
},
補充:
type=file の場合にアップロードされたファイルを削除する方法:this.$refs.[xxx].value = nullまたはthis.$refs.xxx = null
-------------------追記-----2023.08.01--------------------- --- ---------------------------------------------- --- ---------------------------------------------- --- --------------
入力ボックスをアップロードしてフォームに書き込むと、確認プロンプトがクリアできない問題を解決
以前のプロジェクトのコードを変更したところ、図に示すように、入力の type=file によってアップロードが実現されていることがわかり、フォームの検証でも問題が発生しました。
フォームに記載されているためルール検証は行われますが、検証発動後にファイルをアップロードしても検証は消えません。
そこで iview のソースコードを参照してthis.$refs.productData.fieldsを出力しました。
もう一度印刷します。検証のバインドされた入力のフィールド prop をクリアしたいです。
const fields = this.$refs.productData.fields
fields.forEach((item) => {
if (item.prop === 'fileNote') {
console.log(item)
}
})
得られた印刷結果は次の図に示されています。
いくつかの重要な API が見つかりました。これらは、上の図で囲まれたものです。
iviewフォームクリア検証ステータスの実現
実際には、formItemの2つの属性値を変更するのですが、
validateDisabled、validateStateの表示ステータスを検証するかどうか
（検証が間違っている場合、ここでの値は「error」になります）、
validateMessageエラーメッセージ
（追記：カンカンを印刷できます）あなた自身、私のスクリーンショットはすべての API が印刷されているわけではありません)
したがって、検証をクリアしたい場合は、フィールドのresetField()メソッドを呼び出すか、上記の属性を変更する必要がありますが、ここでは最初のメソッドを使用します。
完全なコード:
<Form ref="productData" :model="productData" :label-width="170" label-colon>
.......
<FormItem label="上传" prop="fileNote" :rules="ruleValidate['fileNote']">
<Button class="file-btn">
<span class="file-real">选择文件</span>
<input placeholder="请选择" type="file" @change="handleKeyUpload" ref="file" id="fileId" />
</Button>
<span>{
{
keyFileUrl}}</span>
</FormItem>
......
</Form>
js部分
handleKeyUpload (e) {
// 上传文件后清除校验提示（重点就是这里）
const fields = this.$refs.productData.fields
fields.forEach((item) => {
if (item.prop === 'fileNote') {
item.resetField() // 重点！！！！！
}
})
// 获取用户选择的文件
const files = this.$refs.file.files
// 限制的格式范围
// const txtname = '.png,.exe,'
// // 校验
// var extName = files[0].name.substring(files[0].name.lastIndexOf('.')).toLowerCase() // （把路径中的所有字母全部转换为小写）
// // 判断
// if (txtname.indexOf(extName + ',') === -1) {
// this.$Message.error('请上传正确的文件格式！如：' + txtname)
// return
// }
this.keyFileUrl = e.target.value
this.getBase64File(files[0])
return false
},
// 把文件转化为base64
getBase64File (file) {
const reader = new FileReader()
reader.readAsDataURL(file)
this.productData.fileNote = null
// 注意此方法是异步的 若要卸载外面需要将其改写为promise
reader.onload = (e) => {
this.productData.fileNote = e.target.result // 将base64编码赋值给对象
this.productData.fileNote = encodeURIComponent(this.productData.fileNote.substring(this.productData.fileNote.indexOf(',') + 1))
}
},