elementui与input[type="file"]文件上传
1.elementui文件上传组件
template中
<el-upload
:http-request="uploadFile"
action="https://jsonplaceholder.typicode.com/posts/"
list-type="picture-card"
ref="upload"
:data="formData"
limit="4"
accept="image/jpeg,image/gif,image/png,image/jpg"
:on-preview="handlePictureCardPreview"
:on-change="imageChange"
:auto-upload="false"
:file-list="imageList"
:on-remove="handleRemove"
style="width: 100%;">
<i class="el-icon-plus"></i>
</el-upload>
// 查看图片的弹出框
<div>
<el-dialog :visible.sync="dialogVisibleImg">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
</div>
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中
<div style="border:1px solid #ccc;border-radius: 4px;">
// 自己写了个漂亮的按钮，点这个按钮触发下面这个input框，实现选文件
<el-button icon="el-icon-document-copy" type="primary" size="small" style="margin-left: 15px;" @click="checkFile">选择文件</el-button>
<span>{{fileName}}</span> // 放文件名的
<input type="file" id="fileinput" style="display: none;" @change="checkFileSure"/> // 实际上传文件的input框在这
</div>
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
});
}
})
每天进步一小步，二手房更近一步。加油！！！