关于el-upload文件上传的问题
关于el-upload文件上传的问题
·
思路:
1、给组件添加事件
:before-upload="beforeUploadFn"
文件上传之前的校验,例如上传格式、上传大小等
2、添加事件
:http-request="handleUpload"
把自动上传改为手动上传,此处还要加一个属性
:auto-upload="false"
3、添加事件
:on-change="handleChange"
关于点击上传文件的change事件,这里可以用来获取文件的一些信息 ,可以实现图片上传前的预览操作
<el-upload
list-type="picture"
class="upload-demo"
drag
ref="upload"
action
multiple
:auto-upload="false"
:show-file-list="true"
:http-request="handleUpload"
:on-change="handleChange"
:limit="1"
:before-upload="beforeUploadFn"
:on-preview="handlePictureCardPreview"
:on-remove="handleUploadRemove"
:file-list="fileList"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处,或<em>点击上传</em>
</div>
</el-upload>
主要js代码
1、对上传文件大小的限制
// 文件上传之前的限制
beforeUploadFn(file) {
console.log(90, file);
const isSize = file.size / 1024 / 1024 < 1;
console.log(92, isSize);
if (!isSize) {
this.$message.error("文件大小不能超过20M!");
return false;
}
},
2、关于手动上传文件的
// 手动上传
handleUpload(file) {
console.log(177, file);
let formData = new FormData(); // 新建一个FormData()对象,这就相当于你新建了一个表单
console.log(187, formData);
formData.append("file", file.file); // 将文件保存到formData对象中
console.log(111, this.selectValue);
if (this.selectValue) {
formData.append("id", this.selectValue);
console.log(111, this.selectValue);
}
console.log(188, formData.get("file"), formData.get("id"));
// 调用上传接口
// uniReq({
// path:'/doc/upload',
// method:'post',
// data:formData
// }).then(res=>{
// console.log(109,res);
// })
},
3、触发上传文件事件(给自己想触发上传文件上传的按钮添加该事件即可)
// 上传图片确认框
confirmFn() {
// 按钮触发调用手动上传的方法
this.$refs.upload.submit();
},
单纯记录!!个人理解!不对之处望指正
更多推荐
已为社区贡献1条内容
所有评论(0)