react-开发经验分享-Upload上传功能的具体项目实现

Mr. 柳上原

发布于 2019-05-17 04:12:42

1.9K00

代码可运行

文章被收录于专栏：菜鸟前端工程师菜鸟前端工程师

运行总次数：0

代码可运行

Author：Mr.柳上原

付出不亚于任何的努力
愿我们所有的努力，都不会被生活辜负
不忘初心，方得始终

ant框架里，Upload上传文件组件的具体使用方法 antd的Upload组件可谓很强大了，自带各种上传api action接口地址，accept类型控制，directory文件夹上传，beforeUpload上传钩子...... 一般能满足普通小项目的上传需求不过不同的公司总会有很多不同的需求，所以Upload提供了一个customRequest方法来做特殊上传需求，覆盖自身原本的上传逻辑，比如，断点续传，接口检测，自研发桌面上传工具接入等等 customRequest的具体使用方法如下：

// 自定义上传方法
    photoRequest = async (file) => {
        const _this = this
        let uploadUrl = `${UploadUrl}/file/upload/${file.uid}`

        const photoRequest = new Promise((resolve, reject) => {
            let formData = new FormData()

            formData.append("fileGuid", file.uid)
            formData.append("name", file.name)
            formData.append("file", file)

            let xhr = new XMLHttpRequest()

            xhr.open('POST', uploadUrl, true)
            xhr.send(formData)

            xhr.onload = function (e) {
                if (this.status === 200) {
                    let res = JSON.parse(this.response)

                    console.log(res, 'res')

                    if (res.code === "0") {
                        let { fileList } = _this.state
                        let newFileList = fileList.concat()

                        let photoData = {
                            from: 'pc-upload',
                            WXPath: res.path,
                            localUrl: res.url,
                            deviceName: res.deviceName,
                            fileExt: res.ext,
                            uri: res.path,
                            url: `${UploadUrl}${res.url}`,
                            type: 'ORIGINAL',
                            name: file.name,
                            uid: file.uid
                        }

                        newFileList.push(photoData)

                        _this.setState({
                            fileList: newFileList
                        })

                        resolve({ code: '0', message: '上传成功' })
                    } else {
                        message.error({
                            message: '上传失败：',
                            duration: 3
                        })

                        resolve({ code: '1', message: '上传失败' })
                    }
                } else {
                    message.error({
                        message: '上传失败!',
                        duration: 3
                    })

                    resolve({ code: '1', message: '上传失败' })
                }
            }

            xhr.onerror = function (e) {
                message.error({
                    message: '上传失败!',
                    duration: 3
                })

                resolve({ code: '1', message: '上传失败' })
            }

            xhr.onabort = function () {
                message.error({
                    message: '上传异常终止!',
                    duration: 3
                })

                resolve({ code: '1', message: '上传异常终止' })
            }
        })

        return photoRequest
    }
}

需要注意的是，一般使用自定义上传方法后，删除图片的时候，都会出现一个报错

reqs[uid].abort is not a function

这是因为Promise是没有abort 方法的，只有原生js的XMLHttpRequest对象才具有abort

解决办法为：

// 简单粗暴的强行写入
const P = new Promise((resolve, reject) => {})
P.abort = () => {}

abort的具体使用方法，可以参考CSDN的Promise使用指南，或者菜鸟教程runoob，或者MDN的JavaScript专栏，或者，以下...

//通过cancelableXHR 方法取得包装了XHR的promise对象和取消该XHR请求的方法
//
function cancelableXHR(url){
    var req=new XMLHttpRequest();
    var promise=new Promise(function(resolve,reject){
        req.open('GET',url,true);
        req.onload=function(){
            if (req.status===200) {
                resolve(req.responseText);
            }else{
                reject(new Error(req.statusText))
            }
        }
        req.onerror=function(){
            reject(new Error(req.responseText))
        }
        req.onabort=function(){
            reject(new Error('abort this request'))
        }
        res.send();
    })
    var abort=function(){
        if (req.readyState!==XMLHttpRequest.UNSENT) {
            req.abort();
        }
    }

    return {
        promise:promise,
        abort:abort
    }
}

var object=cancelableXHR('http://www.sqqs.com/index')

timeoutPromise(object.promise,1000).then(function(content){
    console.log(`content:${content}`);
}).catch(function(error){
    if (error instanceof TimeoutError) {
        object.abort();
        return console.log(error)
    }
    console.log(`XHR Error:${error}`);
})