Use el cuadro de entrada tradicional para darse cuenta de la forma de cargar archivos, como se muestra en la figura:
Cómo verificar el formato del archivo, el código es el siguiente:
-------------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
}
},
Reponer:
Cómo eliminar el archivo cargado cuando type=file: this.$refs.[xxx].value = nullothis.$refs.xxx = null
--------------------Actualización-----2023.08.01------------------ --- ----------------------------------------------- --- ----------------------------------------------- --- --------------
Resuelva el problema de que el cuadro de entrada se carga y se escribe en el formulario, y el mensaje de verificación no se puede borrar
Al cambiar el código del proyecto anterior, encontré que la carga se realizaba a través del type=file de la entrada, y también encontré problemas al verificar el formulario, como se muestra en la figura
Debido a que está escrito en el formulario, se realiza la verificación de las reglas. Sin embargo, incluso si el archivo se carga después de que se activa la verificación, la verificación no puede desaparecer.
Así que me referí al código fuente de iview e imprimí esto.$refs.productData.fields
Imprímalo de nuevo, quiero borrar el objeto de campo de la entrada enlazada de la verificación
const fields = this.$refs.productData.fields
fields.forEach((item) => {
if (item.prop === 'fileNote') {
console.log(item)
}
})
Los resultados impresos obtenidos son los que se muestran en la siguiente figura:
Se encontraron varias APIs importantes, que son las enmarcadas en la figura anterior
Realización del estado de verificación de limpieza del formulario iview
De hecho, es para modificar los dos valores de atributo de formItem,
validateDisabled si verificar
el estado de visualización de validateState (el valor aquí es 'error' cuando la verificación es incorrecta)
validar mensaje de error de mensaje
(ps: puede imprimir Kangkang usted mismo, mi captura de pantalla no está impresa en todos los apis)
Por lo tanto, si desea borrar la verificación, debe llamar al método resetField() del campo, o simplemente cambiar los atributos anteriores. Usaré el primer método aquí.
Código completo:
<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))
}
},