ant-design vue上传 多文件 、单文件上传
上传按钮
在data中声明fileList对象用来保存文件数据，本次实验限制上传数量最多为3个，单文件上传方式每次获取 file对象里的file文件即可
// 移除图片handleRemovevideo(file){const index = this.fileList.indexOf(file);const newFileList = this.fileList.slice();newFileList.splice(index, 1);this.fileList = newFileList;},//上传图片之前的校验beforeUploadFilevideo(file) {const { $message } = thisif(this.fileList.length == 3){$message.warn("只能上传3个文件")const newFileList = this.fileList.slice();newFileList.splice(-1, 1);//只取前3个this.fileList = newFileList}else{this.fileList = [...this.fileList, file]}//获得允许上传的文件类型var type = this.$refs.files.$attrs['data-type']//采用遍历方式判断文件类型和大小是否都符合规则，也可以只校验当前文件//const index = this.fileList.indexOf(file); 拿到文件索引之后再判断for (let item of this.fileList) {var exName = item.name.split('.')[1] //获得文件后缀名if(type.indexOf(exName) === -1){//类型不受支持$message.error('请检查文件类型,只允许上传图片文件')const index = this.fileList.indexOf(file);this.fileList.splice(index,1)break;}//判断文件大小if (item.size/1024/1024 > 20) {$message.error('上传文件大小不能超过20MB')break;}item.preview = getBase64(item.originFileObj)}return false;},//上传当前图片,每次校验完毕及时上传，需要使用formData 方式，不然问题可能很多handleChangeVideo(file){const { $message } = thisconst formData = new FormData()formData.append('file', file.file)this.fileList = file.fileListupload(formData).then(res=>{if(res.code == 200){$message.success(res.msg)}else if (res.code == 500){$message.error(res.msg)}else($message.error(res.msg))}).catch(err=>{$message.error(err.message)})},
//上传文件 api ，需要加headersexport function uploadInstrument(parameter) {return axios({headers: { 'Content-Type': 'multipart/form-data' },url: api.upload,method: 'post',data: parameter})}
后端代码具体上传文件方法自己实现即可
如有不正确或更好的方式，请大家多多指正!!!
