利用el-upload进行文件或者图片的上传

最新推荐文章于 2024-05-21 23:21:19 发布

慵懒的橘猫

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量259

点赞数 7

分类专栏： element常见问题和笔记文章标签：前端 elementui

本文链接：https://blog.csdn.net/m0_45858045/article/details/136832162

版权

element常见问题和笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<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('头像上传失败，请稍后再试~')
            }
        },