使用elementUI的upload上传文件，用自定义请求（FormData）覆盖默认action

微wx笑 2021-02-26【前端开发】191 6 0关键字： elementUI upload FormData action

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

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

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

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