uniapp 上传本地图片、以二进制流的方式上传

1、上传本地图片

1.1 uni.chooseImage

uni.chooseImage(OBJECT)

从本地相册选择图片或使用相机拍照。

1.2 uni.uploadFile

uni.uploadFile(OBJECT)

将本地资源上传到开发者服务器，客户端发起一个

POST

请求，其中

content-type

为

multipart/form-data

。
如页面通过 uni.chooseImage 等接口获取到一个本地资源的临时文件路径后，可通过此接口将本地资源上传到指定服务器。

代码：

export default {
    methods: {
        /**
         * 从本地相册选择图片
         */
        handleChooseImage() {
            uni.chooseImage({
                count: 3,
                sourceType: ['album'],
                success: res => {
                    let filePath = res.tempFilePaths[0];
                    // 上传图片
                    this.handleUploadFile('/upload', filePath);
                }
            });
        },
        /**
         * 上传
         * @param {String} url 接口地址
         * @param {String} filePath 要上传文件资源的路径
         * @param {Object} data 接口的一些参数
         */
        handleUploadFile(url, filePath, data) {
            uni.uploadFile({
                url: url,
                filePath,
                header: {
                    "authorization": uni.getStorageSync('token')
                },
                formData: data,
                success: (uploadFileRes) => {
                    console.log(uploadFileRes, '上传成功')
                },
                fail: (res) => {
                    console.log(res, '上传失败')
                }
            })
        }
    }
}

2、以二进制流的方式上传

export default {
    methods: {
        handleUpload() {
            // 获取二进制流（暂时用base64转二进制流测试）
            let dataurl =
                'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAIAAAA7ljmRAAAAGElEQVQIW2P4DwcMDAxAfBvMAhEQMYgcACEHG8ELxtbPAAAAAElFTkSuQmCC';
            let blob = this.dataURLtoBlob(dataurl);
            this.handleUploadFile('upload', blob)
        },
        /**
         * Base64字符串转二进制流
         * @param {String} dataurl Base64字符串(字符串包含Data URI scheme，例如：data:image/png;base64, )
         */
        dataURLtoBlob(dataurl) {
            var arr = dataurl.split(","),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {
                type: mime,
            });
        },
        /**
         * 上传
         * @param {String} url 接口地址
         * @param {Object} file 二进制流
         * @param {Object} data 接口的一些其他的参数
         */
        handleUploadFile(url, file, data) {
            uni.uploadFile({
                url: url,
                file,
                header: {
                    "authorization": uni.getStorageSync('token')
                },
                formData: data,
                success: (uploadFileRes) => {
                    console.log(uploadFileRes, '上传成功')
                },
                fail: (res) => {
                    console.log(res, '上传失败')
                }
            })
        }
    }
}