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

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的Java​Script专栏，或者，以下...

//通过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}`);
})