<div class="upload">
<el-upload
action="stuEcommerceDataReport/uploadAnalysisData"
:data="{ type: 1 }"
:headers="headerParam"
:on-success="handleCoverSuccessAnswer"
:on-error="imageError"
:before-upload="beforeCoverUpload"
:show-file-list="false">
<el-button type="primary" size="medium" plain class="upload-btn">点击上传</el-button>
</el-upload>
<p class="fileInfo" v-show="analysis_data.sale_trend_analysis_file.name">
已选择:<span class="filename">{{analysis_data.sale_trend_analysis_file.name}}</span>
<i class="el-icon-close" @click="deleteFile(1)"></i>
</p>
</div>
/
headerParam: {
Authorization: localStorage.getItem("studentToken") || "",
},
.action=“stuEcommerceDataReport/uploadAnalysisData"文件的上传调用的接口
:data=”{ type: 1 }" 接口需要的参数
:headers=“headerParam” 请求头,发送axios请求是需要设置的请求头,一般需要携带token
:on-success=“handleCoverSuccessAnswer1"文件上传是调用的函数,接受特定的参数,第一个参数是文件返回的结果,即res
:on-error=“imageError” 文件上传失败调用的函数,也是接受特定的参数
:before-upload=“beforeCoverUpload” 文件上传之前调用的函数,可以在这里来限制文件上传的大小
:show-file-list=“false"是否显示文件上传的列表,true为显示
accept=”.jpg, .jpeg, .png” 限制文件上传的类型
beforeCoverUpload(file) {
const is2M = file.size / 1024 / 1024 < 10;
if (!is2M) {
this.$message.warning('图片尺寸限制为800px x 800px,大小不可超过2MB');
return false;
} else {
//限制图片的尺寸
const isSize = new Promise((resolve, reject) => {
const width = 800;
const height = 800;
const _URL = window.URL || window.webkitURL;
const img = new Image();
img.onload = () => {
const valid = img.width === width && img.height === height;
valid ? resolve() : reject();
};
img.src = _URL.createObjectURL(file);
}).then(() => {
return file;
}, () => {
this.$message.warning('图片尺寸限制为800px x 800px,大小不可超过2MB');
return Promise.reject();
},
);
return isSize;
}
},
//或者这样判断也可以
const maxSize = 10 * 1024 * 1024; // 10MB 1MB=1024*1024
if (file.size>maxSize) {
this.$message.warning('图片大小不可超过10MB');
return false;
} else
// 上传图片
handleCoverSuccess(res, file) {
if (res.code === 200) {
// this.headerSrc = this.hostUrl + res.data; // 有域名
this.addOrderForm.file = res.data; //无域名
this.$message.success('头像上传成功')
} else {
this.$message.error('头像上传失败,请稍后再试~')
}
},