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