1.下载项目中的文件到电脑本地
将文件放在项目public文件夹file中,下载方法如下
window.open('/file/表格字段模板.xlsx');
2.使用element upload控件如何限制上传文件的大小
<el-upload
style="margin-left: 35px"
drag
action="#"
:file-list="fileList"
:auto-upload="false"
:on-exceed="handleExceed"
:limit="1"
:on-remove="removeFile"
:on-error="uploadError"
:on-change="uploadChange"
:before-remove="beforeRemove"
accept=".xls, .xlsx"
>
<img width="66px" height="53px" src="@/assets/img/mark/upload.png" />
<div style="margin-top:20px;margin-bottom: 20px"><span style="color: #999999;font-size: 14px;">点击或将文件(xsl、xslx),拖拽到这里上传</span></div>
<div><el-button size="small" type="primary">点击上传</el-button></div>
</el-upload>
在uploadChange方法中进行判断
//文件上传
uploadChange(file, fileList) {
const isLt2M = file.size < 1024 * 1024 *2;
if (!isLt2M) {
this.$message({
showClose: true, // 是否显示关闭按钮
duration: 2000, // 弹框显示时间,毫秒
message: '上传文件大小不能超过 2MB!',
type: 'error',
});
}
if(isLt2M){
this.uploadFile = file.raw || null;
}else{
//大小2M的文件从上传文件列表中删除
fileList.splice(-1,1);
}
},
2.两张图片叠放在一起的方法
<div class="left-top" style="position:relative;background:#FFFFFF">
<div style="position: absolute;">
<img style="margin: 20px" height="17px" src="@/assets/img/mark/batch_text_two.png" />
</div>
<img width="100%" height="60px" src="@/assets/img/mark/top_bar_two.png" />
</div>
这样前面的图片在后面图片的上面
3.Form形式上传文件
upload(){
this.loading = true;
let formData = new FormData();
formData.append('file', this.uploadFile);
this.$http({
method: 'post',
url: '/xxx/xxx',
data: formData,
headers: {
'Content-Type': 'multipart/form-data',
'X-Requested-With': 'XMLHttpRequest',
},
}).then(res=>{
this.loading = false;
}) .catch((res)=>{
this.loading = false;
});
}
网友评论