el-upload传多余的参数

发布时间:2024年01月06日

1,html

<el-upload

? ? ? ? ? :data="extraData"

? ? ? ? ? class="avatar-uploader"

? ? ? ? ? :action="$actionUrl + '/upload/single/img'"

? ? ? ? ? :show-file-list="false"

? ? ? ? ? :on-success="handleAvatarSuccess"

? ? ? ? ? :before-upload="beforeAvatarUpload"

? ? ? ? ? @change="handUpImg($event)"

? ? ? ? >

? ? ? ? ? <img v-if="imageUrl" :src="imageUrl" class="avatar" />

? ? ? ? ? <div v-else class="avatar1">

? ? ? ? ? ? <img src="../../../../assets/img/shangchuan.png" alt="" />

? ? ? ? ? </div>

? ? ? ? ? <div class="el-upload__tip" slot="tip" style="margin-left: 30px">

? ? ? ? ? ? {{ imageUrl ? "重新上传" : "请上传png格式图片" }}

? ? ? ? ? </div>

? ? ? ? </el-upload>

?

?2,js

? ? handleAvatarSuccess(res, file) {

? ? ? this.imageUrl1 = res.data;

? ? ? this.imageUrl = URL.createObjectURL(file.raw);

? ? ? // ? const _ = this;

? ? ? // ? let files = file.raw;

? ? ? // ? const formData = new FormData();

? ? ? // ? formData.append("file", files);

? ? ? // ? formData.append("prefix", "user");

? ? ? // ? _.$api.files_api

? ? ? // ? ? .singleImg(formData, {

? ? ? // ? ? ? headers: {

? ? ? // ? ? ? ? "Content-Type": "multipart/form-data",

? ? ? // ? ? ? ? Authorization: localStorage.getItem("token"),

? ? ? // ? ? ? },

? ? ? // ? ? })

? ? ? // ? ? .then((res) => {

? ? ? // ? ? ? if (res.code == 200) {

? ? ? // ? ? ? ? this.imageUrl1 = res.data;

? ? ? // ? ? ? }

? ? ? // ? ? })

? ? ? // ? ? .catch(() => {});

? ? },

? ? beforeAvatarUpload(file) {

? ? ? const isJPG = file.type === "image/jpeg";

? ? ? const isPNG = file.type === "image/png";

? ? ? if (!isJPG && !isPNG) {

? ? ? ? return this.$message.error("上传头像图片只能是 JPG 或 PNG 格式!");

? ? ? }

3,data

?

?data() {

? ? return {

? ? ? extraData: {

? ? ? ? prefix: "user",

? ? ? },

? ? };

? },

文章来源:https://blog.csdn.net/weixin_45869811/article/details/135411460
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。