elementui与input[type="file"]文件上传

2023-07-16 15:28| 来源: 网络整理| 查看: 265

1.elementui文件上传组件

template中

// 查看图片的弹出框

data中

data () { return { dialogImageUrl: '', dialogVisibleImg: false, // 图片 imageList: [], uploadForm: new FormData() // 文件形式 } }

methods中

uploadFile (file) { this.uploadForm.append('files', file.file); // 上传的文件放在files里面了 console.log(this.uploadForm) }, handleRemove (file, fileList) { _this.imageList.splice(index, 1) }, handlePictureCardPreview (file) { this.dialogImageUrl = file.url; this.dialogVisibleImg = true; }, // 如果是要预览已经上传的图片，那就把路径给放文件的List，比如imageList // 加入我预览文件列表的第一张，则 this.imageList[0].url = '图片预览路径' // 文件上传提交时要写请求头，还有其他的数据需要提交的，如下图 addNew: function (form) { let _this = this; console.log(_this.imageList, '图片文件') let params = {} _this.$refs['form'].validate((valid) => { if (valid) { params = JSON.parse(JSON.stringify(_this.formData)); // 设置请求头 let config = { headers: { 'Content-Type': '' } } _this.uploadForm = new FormData() _this.$refs.upload.submit(); // 把刚刚保存的文件提交一下 // model放form表单数据，具体看后台要什么字段就改什么字段，放文件的在第一个方法里 _this.uploadForm.append('model', JSON.stringify(params)); _this.axios.post('tmscarfuelms/', _this.uploadForm, config).then(function (response) { if (response) { if (response.succeed === true) { _this.$message.success(response.message) } else { _this.$message.warning(response.message) } } }).catch(function () { _this.loadingBtn = false }); } }) },

在里插入图片描述

2.input[type=“file”]普通文件上传

template中

// 自己写了个漂亮的按钮，点这个按钮触发下面这个input框，实现选文件选择文件 {{fileName}} // 放文件名的 // 实际上传文件的input框在这

data中

data () { return { fileName: '' } }

methods中

methods: { // 漂亮按钮点击事件 checkFile () { document.querySelector('#fileinput').click() }, // 选择的文件 // !!!!!!!!!!!!!!!!!!!!注意。如果使用的input框。文件选择后的名字不是value值 // 而是name值 document.querySelector('#fileinput').files[0].name checkFileSure (val) { console.log(document.querySelector('#fileinput').files[0]) this.fileName = document.querySelector('#fileinput').files[0].name } }

在这里插入图片描述就是红框内的名字。如果你想重新赋值，那么就改它的name值 document.querySelector(’#fileinput’).files[0].name = ‘大美女.jpg’ ！！！！！！！！！！！！注意！！！！！！！！！！！普通文件上传有个隐藏的小问题，就是先选择一个文件比如：大美女.jpg 我再重新选这个文件就选不上。获者仿elementui文件上传做个删除选择图片的按钮后。点击删除，把文件删除后也选不了同样的文件。（再次选大美女.jpg）选不了。只能先随便选一个文件再选大美女.jpg才有反应。因为input[type=“file”]是change事件，文件选择没有发生改变所以无效。解决方法：document.querySelector(’#fileinput’).value = ‘’ 即可文件上传提交时，也有form表单或者其他也要提交的内容时： methods中

addNew: function (form) { let _this = this; let params = {} _this.$refs['form'].validate((valid) => { if (valid) { params = JSON.parse(JSON.stringify(_this.formData)); // 设置请求头 let config = { headers: { 'Content-Type': 'multipart/form-data' // 'authorization': getCookie('accessToken') } } _this.uploadForm = new FormData() // model放form表单数据，具体看后台要什么字段就改什么字段，放文件的在第一个方法里 _this.uploadForm.append('model', JSON.stringify(params)); // model放文件以外的内容 _this.uploadForm.append('files', JSON.stringify(params)); // files放文件，同理，model和files都与后台协商好。后台说文件我要filesx那就把files改成filesx即可 _this.axios.post('tmscarfuelms/', _this.uploadForm, config).then(function (response) { if (response) { if (response.succeed === true) { _this.$message.success(response.message) } else { _this.$message.warning(response.message) } } }).catch(function () { _this.loadingBtn = false }); } })

每天进步一小步，二手房更近一步。加油！！！

【本文地址】

公司简介

联系我们