前端开发您现在的位置是:首页 > 博客日志 > 前端开发

使用elementUI的upload上传文件,用自定义请求(FormData)覆盖默认action

<a href='mailto:'>微wx笑</a>的头像微wx笑2021-02-26 08:52:33前端开发人已围观关键字: elementUI  upload  FormData  action  

在处理文件上传的时候,我们可能还需要提交额外的参数,这时就需要使用 http-request 覆盖默认的上传行为,可以自定义上传的实现。

在处理文件上传的时候,我们可能还需要提交额外的参数,这时就需要使用 http-request 覆盖默认的上传行为,可以自定义上传的实现。fVK编程技术_踩坑日志_进阶指南_无知人生

template

        <el-form-item label-width="180px" label="组织Logo:" class="postInfo-container-item">
          <el-input v-model="postForm.orgLogoUrl" placeholder="组织Logo,只能是 JPG 格式,大小不能超过 2MB!" />
          <el-upload
            class="avatar-uploader"
            :action=""
            :http-request="handleRequest"
            :show-file-list="false"
            :on-success="handleLogoSuccess"
            :before-upload="beforeLogoUpload"
          >
            <img v-if="postForm.orgLogoUrl" :src="postForm.orgLogoUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>

script

<script>
    export default {
        name: "TestUpload",
        data() {
            return {
                fileList: [],
            }
        },
        methods: {
            /**
             * 上传的文件个数超出限制时触发的钩子
             * @param files
             * @param fileList
             */
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 3 个文件,本次选择了 ${files.length} 个文件,共选择了 ${files.length + fileList.length} 个文件`);
            },
            sendFile() {
                this.$refs.fileUpload.submit();
            },
            handleLogoSuccess(res, file) {
              this.postForm.orgLogoUrl = res.data
            },
            beforeLogoUpload(file) {
              const isJPG = file.type === 'image/jpeg'
              const isLt2M = file.size / 1024 / 1024 < 2
        
              if (!isJPG) {
                this.$message.error('上传组织Logo图片只能是 JPG 格式!')
              }
              if (!isLt2M) {
                this.$message.error('上传组织Logo图片大小不能超过 2MB!')
              }
              return isJPG && isLt2M
            },
            /**
             * 覆盖默认的上传文件,自定义实现文件上传
             */
            handleRequest(params) {
                console.log("request", params);
                let formData = new FormData();
                formData.append("file", params.file);
                // ArchiveImportHttpService.uploadFile({
                //     userId: window.$config.userId,
                //     appId: window.$config.appId,
                //     req: formData
                // }).then(({data}) => {
                //     console.log(data);
                // }).catch(err => {
                //     console.log(err);
                // })
            },
            /**
             * 文件列表移除文件时的钩子
             * @param file
             * @param fileList
             */
            handleRemove(file, fileList) {
                console.log("remove", file, fileList);
            },
            /**
             * 文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用
             * @param file
             */
            handleChange(file) {
                this.file2JSON(file).then(data => {
                    // data对象的每个元素就是excel文件的每个sheet页的数据
                    console.log(data);
                }).catch(err => {
                    console.log(err);
                })
            },
            /**
             * 删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止删除。
             * @param file
             * @param fileList
             * @return {Promise<MessageBoxData> | *}
             */
            handleBeforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${file.name}?`);
            },
            /**
             * 使用xlsx将excel文件对象转换成json格式
             * @param file
             * @return {Promise<unknown>}
             */
            file2JSON(file) {
                return new Promise((resolve, reject) => {
                    let reader = new FileReader();

                    reader.onload = function (event) {

                        let resSheet = XLSX.read(event.target.result, {
                            type: "binary"
                        });

                        let resJSON = [];
                        resSheet.SheetNames.forEach(sheetName => {
                            resJSON.push({
                                sheetName: sheetName,
                                sheet: XLSX.utils.sheet_to_json(resSheet.Sheets[sheetName])
                            });
                        });

                        resolve(resJSON);
                    };

                    reader.readAsBinaryString(file.raw);
                });
            }
        }
    }
</script>

style

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: auto;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: auto;
    height: 100px;
    display: block;
  }
</style>


fVK编程技术_踩坑日志_进阶指南_无知人生

本文由 微wx笑 创作,采用 CC BY-NC 4.0 许可协议。 非商业性使用可自由转载、引用、甚至修改,但需署名作者且注明出处。

很赞哦! () 有话说 ()