Vue+Element el-upload文件上传
多文件上传 ,类型、大小限制
<h2>上传文件</h2>
<el-card>
<el-upload
class="upload-demo"
ref="upload"
action="#"
:file-list="fileList"
accept=".pdf, .doc, .docx, .xls, .xlsx, .zip, .jpg, .png, .rar"
:http-request="reportFileHttpRequest"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-upload="beforeAvatarUpload"
:auto-upload="false"
drag
multiple
style="text-align: center">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传word,excel,pdf,jpg,png,zip,rar文件</div>
</el-upload>
<div align="center">
<span slot="footer" class="dialog-footer" >
<el-button style="margin-left: 10px;" size="small" @click="fileList = []">取 消</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
</span>
</div>
</el-card>
ref="upload" 注册引用信息
action="#"
:file-list="fileList" 文件列表
accept=".pdf, .doc, .docx, .xls, .xlsx, .zip, .jpg, .png, .rar" 限制文件接收类型
:http-request="reportFileHttpRequest" 自定义上传
:on-preview="handlePreview" 点击文件列表中已上传的文件时的钩子
:on-remove="handleRemove" 文件列表移除文件时的钩子
:before-upload="beforeAvatarUpload" 文件上传之前的钩子
:auto-upload="false" 关闭自动上传
drag 拖拽上传
multiple 批量上传
// 上传文件 此时会触发组件的http-request
submitUpload() {
this.$refs.upload.submit();
},
// 文件列表移除文件时的钩子
handleRemove(file, fileList) {
console.log(file, fileList);
},
// 点击文件列表中已上传的文件时的钩子
handlePreview(file) {
console.log(file);
},
// 文件上传之前的钩子
beforeAvatarUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 32;
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 32MB!');
}
return isLt2M;
},
// 自定义上传
reportFileHttpRequest(param) {
if (this.$refs.upload) {
this.$refs.upload.clearFiles() // 清除上传的文件
}
const _this = this
// 开始上传文件 新建一个formData
const formData = new FormData();//FormData对象,添加参数只能通过append('key', value)的形式添加
formData.append("file", param.file);//添加文件对象
const url = 'http://***********/upload';
axios.post(url, formData)
.then(res => {
axios.post(url, data)
.then(function (resp) {
if (resp.data.code == 200) {
_this.$message({
message: '上传成功',
type: 'success'
});
} else {
_this.$message(resp.data.data)
}
})
})
}