美文网首页
el-upload上传文件获取文件对象转成formData对象传

el-upload上传文件获取文件对象转成formData对象传

作者: 扶得一人醉如苏沐晨 | 来源:发表于2022-11-10 17:56 被阅读0次

组件代码如下

              <el-upload
                    style="width: 100%"
                    class="upload-file"
                    ref="upload"
                    :action="actions"
                    :headers="headers"
                    :limit="limit"
                    accept=".xls,.xlsx"
                    :before-upload="beforeUpload"
                    :on-preview="onPreview"
                    :on-exceed="onExceed"
                    :file-list="fileList"
                    drag
                >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                        将文件拖到此处,或<em>点击上传</em>
                    </div>
                    <div class="el-upload__tip" slot="tip">
                        只能上传xls/xlsx文件,且不超过一个,最大10M
                    </div>
                </el-upload>

beforeUpload

          beforeUpload(file) {
                var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
                const extension = testmsg === 'xls'
                const extension2 = testmsg === 'xlsx'
                const isLt10M = file.size / 1024 / 1024 < 10
                if (!extension && !extension2) {
                    this.$message({
                        message: '上传文件只能是 xls、xlsx格式!',
                        type: 'warning'
                    })
                }
                if (!isLt10M) {
                    this.$message({
                        message: '上传文件大小不能超过 10MB!',
                        type: 'warning'
                    })
                }
                if ((extension || extension2) && isLt10M) {
                    // 获取文件并转成formData对象方便提交给后台
                    const formData = new FormData()
                    formData.append('file', file)
                }
                return (extension || extension2) && isLt10M
            },

相关文章

网友评论

      本文标题:el-upload上传文件获取文件对象转成formData对象传

      本文链接:https://www.haomeiwen.com/subject/fqdatdtx.html