在页面上
http-request: 覆盖默认的上传行为，可以自定义上传的实现
<el-upload
class="avatar-uploader"
action=""
:show-file-list="false"
:on-success="handleAvatarSuccess"
:http-request="requests">
<img v-if="ruleForm.imageUrl" :src="ruleForm.imageUrl" class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
方法中：
// 上传图片
handleAvatarSuccess(res, file) {
this.ruleForm.imageUrl = res.msg;
this.$forceUpdate()
},
新写请求:
requests(file){
let that = this
let isJPG = ['image/jpeg', 'image/png', 'image/jpg'];
const isImg =isJPG.includes(file.file.type)
const isLt2M = file.file.size / 1024 / 1024 < 1;
if (!isImg) {
this.$message.error('请上传正确的LOGO格式!');
return false
}
if (!isLt2M) {
this.$message.error('上传LOGO大小不能超过 1MB!');
return false
}
let fd = new FormData();
fd.append('file', file.file);//传文件
let loading = this.$loading()
//下面是接口请求
tenantUpload(fd).then(res => {
that.ruleForm.imageUrl = res.data.msg;
that.$forceUpdate()
}, this.err).finally(() => loading.close())
},
//第二种上传
<input ref="filElem" type="file" class="upload-file" accept=".xlsx, .xls,.csv" style="display: none" @change="getFile"/>
<el-button type="primary" @click.native="importFile">导入</el-button>
方法:
// 导入
importFile() {
this.$refs.filElem.dispatchEvent(new MouseEvent("click"));
},
getFile() {
let that = this;
let param = this.$refs.filElem.files[0];
let formData = new FormData();
formData.append("medical_import", param);
// this.$axios({
// url: "http://195.195.8.157/v3/api/medical/service/excel/import", // 请求的 url 地址
// method: "post", // 请求方式
// data: formData, // 传递的参数
// })
// .then((res) => {
// if (res.data.code == 200) {
// that.$message.success(res.data.message);
// } else {
// that.$message.error(res.data.message);
// }
// })
// .catch((err) => {
// console.log(err);
// });
this.$familyNewAddUrl
.post("/medical/service/excel/import", formData, {
"Content-Type": "application/x-www-form-urlencoded",
})
.then((res) => {
if (res.data.code == 200) {
that.$message.success(res.data.message);
} else {
that.$message.error(res.data.message);
}
});
},
//图片转base64
urlToBase64(url) {
return new Promise((resolve, reject) => {
const image = new Image();
image.onload = function () {
const canvas = document.createElement("canvas");
canvas.width = this.naturalWidth;
canvas.height = this.naturalHeight;
// 将图片插入画布并开始绘制
canvas.getContext("2d").drawImage(image, 0, 0);
// result
const result = canvas.toDataURL("image/png");
resolve(result);
};
// CORS 策略，会存在跨域问题https://stackoverflow.com/questions/20424279/canvas-todataurl-securityerror
image.setAttribute("crossOrigin", "Anonymous");
image.src = url;
// 图片加载失败的错误处理
image.onerror = () => {
reject(new Error("转换失败"));
};
});
},