formData / content-type-multipart

HTML代码如下:

<Upload multiple
type="drag"
ref="upload"
:show-upload-list="true"
:default-file-list="defaultList"
:before-upload="handleUpload"
:on-remove="handleRemove"
:on-preview="handlePreview"
:on-format-error="handleFormatError"
:on-success="handleSuccess"
action="xxx"
:format="uploadFormat"
style="width: calc(100% - 100px);"
>
   <div style="padding: 20px 0">
       <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
       <p>点击或拖拽上传附件(附件内容需盖公章)</p>
   </div>
</Upload>

JS 代码如下:

handleUpload(file) {
    // 清空文件列表
    let self = this;
    self.$refs.upload.clearFiles();
    let formData = new FormData();
    formData.append("file", file);
    // 显示列表
    self.showUploadList = true;
    self.file = file;
},
// 移除文件时的钩子
handleRemove(file, fileList) {
    const List = this.defaultList;
    let _index = List.findIndex(t => { return t.uid == file.uid })
    if (_index != -1) {
        this.defaultList.splice(_index, 1);
    }
},
handlePreview(file) {
    let self = this;
    self.$viewerApi({
        images: [file.isBase64],
        options: {
            title: false,
            toolbar: true,
        },
    });
},
handleSuccess(res, file, fileList) {
    let data = res[0];
    this.uploadList.push(data);
    this.showUploadList = false;
    this.$refs.upload.fileList = [];
},
handleFormatError(file) {
    this.$Notice.warning({
        title: "文件格式不正确",
        desc: "文件 " + file.name + " 格式不正确,请上传.xls,.xlsx文件。",
    });
},

后端代码如下:

// 获取文件
async uploadData() {
    const ctx = this.ctx
    const parts = ctx.multipart();
    let part, baseDir = this.config.gyyqyd.fileSrc
    let ID = "", target = "", filename, saveFile = ""
    try {
        while ((part = await parts()) != null) {
            if (part.length) {
                console.log(part)
                // if (part[0] == "ID") {
                //     //从客户端传回来的属性
                //     ID = part[1];
                // }
            } else {
                if (!part.filename) {
                    // 这时是用户没有选择文件就点击了上传(part 是 file stream,但是 part.filename 为空)
                    // 需要做出处理,例如给出错误提示消息
                    return { state: 0, msg: "文件出错!" }
                }
                filename = part.filename;
                saveFile = `fileupload/${filename}`
                target = path.join(baseDir, saveFile); //文件路径
                global.Helper.File.ensurePath(target); //返回 path 的目录名
                await global.Helper.Stream.savefileAsyc(part, target);
            }
        }
    } catch (error) {
    
    }
    return
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值