antd |
您所在的位置：网站首页 › antd文件上传带其他参数 › antd |
antd
|
项目需求中总是会有上传图片文件等功能，现在有时间正好做下简单总结 一般常用的几个属性就是 fileList,customRequest,multiple,showUploadList,before 常用事件就是change 1、multiple 这个就是在选择文件的时候是否能够多选，设置为true可以多选，不必多说 2、showUploadList 这个属性如果设置为 :showUploadList=false的话，就是不展现上传后的列表 就是这个列表将不做展示 如果设置 { showPreviewIcon?: boolean, showRemoveIcon?: boolean } 就可以控制图标中的删除和预览按钮的是否显示 3、beforeUpload 这个是最最常用的，用来控制文件上传前的格式，或者文件大小等属性的校验 export default{ data(){ return { fileList:[] } }, methods:{ beforeUpload(file,UpFileList) // file：上传单个文件时候的文件内容，UpFileList：上传多个文件时的文件内容组成的数组 // 1、控制文件数量 if (this.fileList.length + UpFileList.length > 10) { this.$message.warning('超过文件上传数量限制') // 设置上传的文件为错误状态 file.status = 'error' return false } // 2、控制上传的文件大小 if (file.size > 1073741824) { this.$message.warning('文件大小超过最大限度1G') file.status = 'error' return false } // 3、控制上传文件不能为空 if (file.size === 0) { this.$message.warning('所选信息中存在空文件或目录，请重新选择') file.status = 'error' return false } // 4、控制已上传文件不重复 this.fileList.map(item=>{ if(item.name===file.name){ this.$message.warning('不允许重复上传') file.status = 'error' return false } }) // 5、控制上传文件的类型 arr是上传类型的白名单 const type = file.name.slice(file.name.lastIndexOf('.') + 1).toLowerCase() const arr = ['.jpg', '.png', '.jpeg'] if (arr.includes('.' + type)) { return true } else { this.$message.warning(`不支持以 .${type} 扩展类型的文件或图片上传!`) file.status = 'error' return false } } }4、customRequest 这个属性好用且常用 export default{ data(){ return{ fileList:[] } }, methods:{ // 自定义上传，可以自定义上传接口，不用通过action属性，还是非常灵活的 customRequest(file){ // file 是上传的文件 其内容会在放在下面截图中 // 后端需要接受的参数是 formData数据， const form = new FormData() form.append('file', file.file) // uploadFile 我自己的接口 uploadFile(form).then(res => { if (res.success) { // 调用组件内方法, 设置为成功状态 file.onSuccess(res, file.file) file.status = 'done' } else { file.onError() file.status = 'error' } }) } }, // 设置好头部 uploadFile (parameter) { return axios({ url: api.uploadFile, method: 'post', headers: { 'Content-Type': 'multipart/form-data' }, data: parameter }) } }5 change事件 export default{ data(){ return{ fileList:[] } }, uploadChange(file,fileList,){ this.fileList = fileList.filter(item => item.status !== 'error') // 项目需求自己写趴 } // file对象里的内容 // uid: 'uid', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突 // name: 'xx.png', // 文件名 // status: 'done', // 状态有：uploading done error removed // response: '{"status": "success"}', // 服务端响应内容 // linkProps: '{"download": "image"}', // 下载链接额外的 HTML 属性 // xhr: 'XMLHttpRequest{ ... }', // XMLHttpRequest Header } |
【本文地址】
今日新闻 |
推荐新闻 |