vue element ui 上传请求接口

在页面上

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())

//第二种上传

<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("转换失败"));

};

});

vue element ui 上传 请求接口

vue element ui 上传请求接口